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Introduction to VRML 97 


Abstract 


VRML (the Virtual Reality Modeling Language) has emerged as the de facto standard for describing 
3-D shapes and scenery on the World Wide Web. VRML’s technology has very broad applicability, 
including web-based entertainment, distributed visualization, 3-D user interfaces to remote web 
resources, 3-D collaborative environments, interactive simulations for education, virtual museums, 
virtual retail spaces, and more. VRML is a key technology shaping the future of the web. 

Participants in this tutorial will learn how to use VRML 97 (a.k.a. ISO VRML , VRML 2.0, and Moving 
Worlds) to author their own 3-D virtual worlds on the World Wide Web. Participants will learn VRML 
concepts and terminology, and be introduced to VRML’s text format syntax. Participants also will learn 
tips and techniques for increasing performance and realism. The tutorial includes numerous VRML 
examples and information on where to find out more about VRML features and use. 



Introduction to VRML 97 


Preface 


Welcome to the Introduction to VRML 97 tutorial notes! These tutorial notes have been written to 
give you a quick, practical, example-driven overview of VRML 97, the Web’s Virtual Reality 
Modeling Language. To do this, I’ve included over 500 pages of tutorial material with nearly 200 
images and over 100 VRML examples. 

To use these tutorial notes you will need an HTML Web browser with support for viewing VRML 
worlds. An up to date list of available VRML browsing and authoring software is available at: 

The VRML Repository 

(http://vrml.sdsc.edu) 

What’s included in these notes 

These tutorial notes primarily contain two types of information: 

1. General information, such as this preface 

2. Tutorial slides and examples 

The tutorial slides are arranged as a sequence of 500+ hyper-linked pages containing VRML 
syntax notes, VRML usage comments, or images of sample VRML worlds. Clicking on a sample 
world’s image, or the file name underneath it, loads the VRML world into your browser for you to 
examine yourself. 

You can view the text for any of the VRML worlds using a text editor and see how I created a 
particular effect. In most cases, the VRML files contain extensive comments providing 
information about the techniques the file illustrates. 

The tutorial notes provide a necessarily terse overview of VRML. I recommend that you invest in 
one of the VRML books on the market to get thorough coverage of the language. I am a co-author 
of one such VRML book, The VRML 2.0 Sourcebook. Several other good VRML books are on the 
market as well. 

A word about VRML versions 

VRML has evolved through several versions of the language, starting way back in late 1994. 

These tutorial notes cover VRML 97, the latest version of the language. To provide context, the 
following table provides a quick overview of these VRML versions and the names they have 
become known by. 



Version Released Comments 


May 1995 Begun in late 1994, the first version of VRML was largely based upon 
the Open Inventor file format developed by Silicon Graphics Inc. The 
VRML 1.0 specification was completed in May 1995 and included 
support for shape building, lighting, and texturing. 

VRML 1.0 browser plug-ins became widely available by late 1995, 
though few ever supported the full range of features defined by the 
VRML 1.0 specification. 

VRML January As vendors began producing VRML 1.0 browsers, a number of 

1.0c 1996 ambiguities in the VRML 1.0 specification surfaced. These problems 

were corrected in a new VRML 1.0c (clarified) specification released in 
January 1996. No new features were added to the language in VRML 
1.0c. 

In late 1995, discussion began on extensions to the VRML 1.0 
specification. These extensions were intended to address language 
features that made browser implementation difficult or inefficient. The 
extended language was tentatively dubbed VRML 1.1. These 
enhancements were later dropped in favor of forging ahead on VRML 
2.0 instead. 

No VRML 1.1 browsers exist. 

Moving January VRML 1.0 included features for building static, unchanging worlds 

Worlds 1996 suitable for architectural walk-throughs and some scientific 

visualization applications. To extend the language to support animation 
and interaction, the VRML architecture group made a call for proposals 
for a language redesign. Silicon Graphics, Netscape, and others worked 
together to create the Moving Worlds proposal, submitted in January 
1996. That proposal was later accepted and became the starting point for 
developing VRML 2.0. The final VRML 2.0 language specification is 
still sometimes referred to as the Moving Worlds specification, though it 
differs significantly from the original Moving Worlds proposal. 

VRML August After seven months of intense effort by the VRML community, the 

2.0 1996 Moving Worlds proposal evolved to become the final VRML 2.0 

specification, released in August 1996. The new specification 
redesigned the VRML syntax and added an extensive set of new 
features for shape building, animation, interaction, sound, fog, 
backgrounds, and language extensions. 

While multiple VRML 2.0 browsers exist today, as of this writing, none 
are complete. All of the browsers are missing a few features. 


VRML canceled 
1.1 


VRML 

1.0 




Fortunately, most of the missing features are obscure aspects of VRML. 


VRML September In early 1997, efforts got under way to present the VRML 2.0 

97 1997 specification to the International Standards Organization (ISO) which 

oversees most of the major language specifications in use in the 
computing community. The ISO version of VRML 2.0 was reviewed 
and the specification significantly rewritten to clarify issues. A few 
minor changes to the language were also made. The final ISO VRML 
was dubbed VRML 97. The VRML 97 specification features finalized in 
March 1997, while the specification’s text finalized in September 1997. 

Most major VRML 2.0 browsers are now VRML 97 browsers. 

VRML 1.0 and VRML 2.0 differ radically in syntax and features. A VRML 1.0 browser cannot 
display VRML 2.0 worlds. Most VRML 2.0 browsers, however, can display VRML 1.0 worlds. 

VRML 97 differs in a few minor ways from VRML 2.0. In most cases, a VRML 2.0 browser will 
be able to correctly display VRML 97 files. However, for 100% accuracy, you should have a 
VRML 97 compliant browser for viewing the VRML files contained within these tutorial notes. 

How I created these tutorial notes 

These tutorial notes were developed primarily on Silicon Graphics High Impact UNIX 
workstations. HTML and VRML text was hand-authored using a text editor. A Perl program script 
was used to process raw tutorial notes text to produce the 500+ individual HTML files, one per 
tutorial slide. 

HTML text was displayed using Netscape Navigator 3.01 on Silicon Graphics and PC systems. 
Colors were checked for viewability in 24-bit, 16-bit, and 8-bit display modes on a PC. Text sizes 
were chosen for viewability at a normal 12 point font on-screen, and at an 18 point font for 
presentation during the tutorial. The large text, white-on-black colors, and terse language are used 
to insure that slides are readable when displayed for the tutorial audience at the conference. 

VRML worlds were displayed on Silicon Graphics systems using the Silicon Graphics Cosmo 
Player 1.02 VRML 97 compliant browser for Netscape Navigator. The same worlds were 
displayed on PC systems using three different VRML 2.0 compliant browsers for Netscape 
Navigator: Silicon Graphics Cosmo Player 2.0 beta 1, Intervista WorldView 2.0, and Newfire 
Torch beta. 

Texture images were created using Adobe PhotoShop 4.0 on a PC with help from KAI’s 
PowerTools 3.0 from MetaTools. Image processing was also performed using the Image Tools 
suite of applications for UNIX workstations from the San Diego Supercomputer Center. 

PDF tutorial notes for printing were created by dumping individual tutorial slides to PostScript on 
a Silicon Graphics workstation. The PostScript was transferred to a PC where it was converted to 
PDF and assembled into a single PDF file using Adobe’s Distiller and Exchange. 



Use of these tutorial notes 


I am often asked if there are any restrictions on use of these tutorial notes. The answer is: 

These tutorial notes are copyright (c) 1997 by David R. Nadeau. Users and possessors of 
these tutorial notes are hereby granted a nonexclusive, royalty-free copyright and design 
patent license to use this material in individual applications. License is not granted for 
commercial resale, in whole or in part, without prior written permission from the authors. 
This material is provided "AS IS" without express or implied warranty of any kind. 

You are free to use these tutorial notes in whole or in part to help you teach your own VRML 
tutorial. You may translate these notes into other languages and you may post copies of these notes 
on your own Web site, as long as the above copyright notice is included as well. You may not, 
however, sell these tutorial notes for profit or include them on a CD-ROM or other media product 
without written permission. 

If you use these tutorial notes, I ask that you: 

1. Give me credit for the original material 

2. Tell me since I like hearing about the use of my material! 

If you find bugs in the notes, please tell me. I have worked hard to try and make the notes 
bug-free, but if something slipped by, I’d like to fix it before others are confused by my mistake. 

Contact 

David R. Nadeau 

San Diego Supercomputer Center 

P.O. Box 85608 

San Diego, CA 92186-9784 

UPS, Fed Ex: 10100 Hopkins Dr. 

La Jolla, CA 92093-0505 

(619) 534-5062 
FAX: (619) 534-5152 

nadeau@sdsc.edu 

http ://w w w. sdsc .edu/-nadeau 
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Lecturer biography 


• David R. Nadeau 

Mr. Nadeau is a principal scientist at the San Diego Supercomputer Center (SDSC), specializing in 
scientific visualization and virtual reality. He is an author of technical papers on graphics and 
VRML and a co-author of two books on VRML (The VRML Sourcebook, and The VRML 2.0 
Sourcebook). He has taught VRML courses at conferences including SIGGRAPH 96-97, WebNet 
96-97, VRML 97, Eurographics 97, and Visualization 97, and is the creator of The VRML 
Repository, a principal Web site for information on VRML software and documentation. Mr. 
Nadeau co-chaired VRML 95, the first conference on VRML, and the VRML Behavior Workshop, 
the first workshop on behavior support for VRML. He is SDSC’s representative in the VRML 
Consortium. 
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Using the VRML examples 


These tutorial notes include over a hundred VRML files. Almost all of the provided worlds are 
linked to from the tutorial slides pages. 

VRML support 

As noted in the preface to these tutorial notes, this tutorial covers VRML 97, the ISO standard 
version of VRML 2.0. There are only minor differences between VRML 97 and VRML 2.0, so 
any VRML 97 or VRML 2.0 browser should be able to view any of the VRML worlds contained 
within these tutorial notes. 

The VRML 97 (and VRML 2.0) language specifications are complex and filled with powerful 
features for VRML content authors. Unfortunately, the richness of the language makes 
development of a robust VRML browser difficult. As of this writing, there are nearly a dozen 
VRML browsers on the market, but none support all features in VRML 97 (despite press releases 
to the contrary). 

I am reasonably confident that all VRML examples in these tutorial notes are correct, though of 
course I could have missed something. Chances are that if one of the VRML examples doesn’t 
look right, the problem is with your VRML browser and not with the example. It’s a good idea to 
read carefully the release notes for your browser to see what features it does and does not support. 
It’s also a good idea to regularly check your VRML browser vendor’s Web site for updates. The 
industry is moving very fast and often produces new browser releases every month or so. 

As of this writing, I have found that Silicon Graphics (SGI) Cosmo Player for PCs and SGI UNIX 
workstations is the most complete and robust VRML 97 browser available. It is this browser that I 
used for most of my VRML testing. On the Macintosh and non-SGI UNIX workstations, I was 
unable to find a usable VRML browser with which to test the VRML tutorial examples. 

What if my VRML browser doesn’t support a VRML feature? 

If your VRML browser doesn’t support a particular VRML 97 feature, then those worlds that use 
the feature will not load properly. Some VRML browsers display an error window when they 
encounter an unsupported feature. Other browsers silently ignore features they do not support yet. 

When your VRML browser encounters an unsupported feature, it may elect to reject the entire 
VRML file, or it may load only those parts of the world that it understands. When only part of a 
VRML file is loaded, those portions of the world that depend upon the unsupported features will 
display incorrectly. Shapes may be in the wrong position, have the wrong size, be shaded 
incorrectly, or have the wrong texture colors. Animations may not run, sounds may not play, and 
interactions may not work correctly. 


For most worlds I have captured an image of the world and placed it on the tutorial slide page to 



give you an idea of what the world should look l ik e. If your VRML browser’s display doesn’t look 
like the picture, chances are the browser is missing support for one or more features used by the 
world. Alternately, the browser may simply have a bug or two. 

In general, VRML worlds later in the tutorial use features that are harder for vendors to implement 
than those features used earlier in the tutorial. So, VRML worlds at the end of the tutorial are more 
likely to fail to load properly than VRML worlds early in the tutorial. 
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Using the JavaScript examples 


These tutorial notes include several VRML worlds that use JavaScript program scripts within 
Script nodes. The text for these program scripts is included directly within the Script node 
within the VRML file. 


JavaScript support 

The VRML 97 specification does not require that a VRML browser support the use of JavaScript 
to create program scripts for Script nodes. Fortunately, most VRML browsers do support 
JavaScript program scripts, though you should check your VRML browser’s release notes to be 
sure it is JavaScript-enabled. 

Some VRML browsers, particularly those from Silicon Graphics, support a derivative of 
JavaScript called VRMLscript. The language is essentially identical to JavaScript. Because of 
Silicon Graphics’ strength in the VRML market, most VRML browser vendors have modified 
their VRML browsers to support VRMLscript as well as JavaScript. 

JavaScript and VRMLscript program scripts are included as text within the uri field of a Script 
node. To indicate the program script’s language, the field value starts with either "javascript:" 
for JavaScript, or "vrmiscript :" for VRMLscript, like this: 


Script { 

field SFFloat bounceHeight 1.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 

uri "vrmiscript: 

function set_fraction( frac, tm ) { 

y = 4.0 * bounceHeight * frac * (1.0 - frac); 
value_changed[0] = 0.0; 
value_changed[1] = y; 
value_changed[2] = 0.0; 

}" 

} 

For compatibility with Silicon Graphics VRML browsers, all JavaScript program script examples 
in these notes are tagged as "vrmiscript :", like the above example. If you have a VRML browser 
that does not support VRMLscript, but does support JavaScript, then you can convert the examples 
to JavaScript simply by changing the tag "vrmiscript :" to "javascript :" like this: 


Script { 

field SFFloat bounceHeight 1.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 

uri "j avas cript: 

function set_fraction( frac, tm ) { 



y = 4.0 * bounceHeight * frac * (1.0 - frac); 
value_changed[0] = 0.0; 
value_changed[1] = y; 
value_changed[2] = 0.0; 

}" 

} 

What if my VRML browser doesn’t support JavaScript? 

If your VRML browser doesn’t support JavaScript or VRMLscript, then those worlds that use 
these languages will produce an error when loaded into your VRML browser. This is unfortunate 
since JavaScript or VRMLscript is an essential feature that all VRML browsers should support. I 
recommend that you consider getting a different VRML browser. 

If you can’t get another VRML browser right now, there are only a few VRML worlds in these 
tutorial notes that you will not be able to view. Those worlds are contained as examples in the 
following tutorial sections: 

O Introducing script use 
O Writing program scripts with JavaScript 
O Creating new node types 

So, if you don’t have a VRML browser with JavaScript or VRMLscript support, just skip the 
above sections and everything will be fine. 
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Using the Java examples 


These tutorial notes include a few VRML worlds that use Java program scripts within Script 
nodes. The text for these program scripts is included in files with . java file name extensions. 
Before use, you will need to compile these Java program scripts to Java byte-code contained in 
files with .class file name extensions. 

Java support 

The VRML 97 specification does not require that a VRML browser support the use of Java to 
create program scripts for Script nodes. Fortunately, most VRML browsers do support Java 
program scripts, though you should check your VRML browser’s release notes to be sure it is 
Java-enabled. 

In principle, all Java-enabled VRML browsers identically support the VRML Java API as 
documented in the VRML 97 specification. Similarly, in principle, a compiled Java program script 
using the VRML Java API can be executed on any type of computer within any brand of VRML 
browser 

In practice, neither of these ideal cases occurs. The Java language is supported somewhat 
differently on different platforms, particularly as the community transitions from Java 1.0 to Java 
1.1 and beyond. Additionally, the VRML Java API is implemented somewhat differently by 
different VRML browsers, making it difficult to insure that a compiled Java class file will work 
for all VRML browsers available now and in the future. 

Because of Java incompatibilities observed with current VRML browsers, I have elected to not 
include compiled Java class files in these tutorial notes. Instead, I include the uncompiled Java 
program scripts. Before use, you will need to compile the Java program scripts yourself on your 
platform with your VRML browser and your version of the Java language and support tools. 

Compiling Java 

To compile the Java examples, you will need: 

O The VRML Java API class files for your VRML browser 
O A Java compiler 

All VRML browsers that support Java program scripts supply their own set of VRML Java API 
class files. Typically these are automatically installed when you install your VRML browser. 

There are multiple Java compilers available for most platforms. Sun Microsystems provides the 
Java Development Kit (JDK) for free from its Web site at http://www.javasoft.com. The JDK 
includes the javac compiler and instructions on how to use it. Multiple commercial Java 
development environments are available from Microsoft, Silicon Graphics, Symantec, and others. 



An up to date list of available Java products is available at Gamelan’s Web site at 
http://www.gamelan.com. 

Once you have the VRML Java API class files and a Java compiler, you will need to compile the 
supplied Java files. Unfortunately, I can’t give you explicit directions on how to do this. Each 
platform and Java compiler is different. You’ll have to consult your software’s manuals. 

Once compiles, place the . class files in the slides folder along with the other tutorial slides. 
Now, when you click on a VRML world using a Java program script, the class files will be 
automatically loaded and the example will run. 

What if my VRML browser doesn’t support Java ? 

If your VRML browser doesn’t support Java, then those worlds that use Java will produce an error 
when loaded into your VRML browser. This is unfortunate since Java is an essential feature that 
all VRML browsers should support. I recommend that you consider getting a different VRML 
browser. 

What if I don’t compile the Java program scripts? 

If you have a VRML browser that doesn’t support Java, or if if you don’t compile the Java 
program scripts, those worlds that use Java will produce an error when loaded into your VRML 
browser. Lortunately, I have kept Java use to a minimum. In fact, Java program scripts are only 
used in the Writing program scripts with Java section of the tutorial slides. So, if you don’t 
compile the Java program scripts, then just skip the VRML examples in that section and 
everything will be fine. 
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Welcome! 

Introduction to VRML 97 
Welcome to the tutorial! 

Dave Nadeau 

San Diego Supercomputer Center 

nadeau@sdsc.edu 



Welcome! 

Schedule for the day 

Part 1 Shapes, geometry, appearance 
Break 

Part 2 Animation, sensors, geometry 
Lunch 

Part 3 Textures, lights, environment 
Break 

Part 4 Scripts, prototypes 



Welcome! 

Tutorial scope 

This tutorial covers VRML 97 

• The ISO standard revision of VRML 2.0 

You will learn: 

• VRML file structure 

• Concepts and terminology 

• Most shape building syntax 

• Most sensor and animation syntax 

• Most program scripting syntax 

• Where to find out more 
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Introducing VRML 

What is VRML? 

What do I need to use VRML? 

Examples 

How can VRML be used on a Web page? 

What do I need to develop in VRML? 

Should I use a text editor? 

Should I use a world builder? 

Should I use a 3D modeler and format translator? 
Should I use a shape generator? 

How do I get VRML software? 



Introducing VRML 

What is VRML? 


VRML is: 

• A simple text language for describing 3-D 
shapes and interactive environments 

VRML text files use a . wri extension 



Introducing VRML 

What do I need to use VRML? 

You can view VRML files using a VRML 
browser: 

• A VRML helper-application 

• A VRML plug-in to an HTML browser 

You can view VRML files from your local 
hard disk, or from the Internet 
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Introducing VRML 

Examples 



[ spiral.wri ] 


[ floater.wri ] 
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Introducing VRML 

How can VRML be used on a Web page? 


• Fill Web page [ boxes.wri ] 

• Embed into Web page [ boxesl.htm ] 

• Fill Web page frame [ boxes2.htm ] 

• Embed into Web page frame [ boxes3.htm ] 

• Embed multiple times [ boxes4.htm ] 
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Introducing VRML 

What do I need to develop in VRML? 

• You can construct VRM L files using: 

• A text editor 

• A world builder application 

• A 3D modeler and format translator 

• A shape generator (like a Perl script) 



11 


Introducing VRML 

Should I use a text editor? 


• Pros: 

• No new software to buy 

• Access to all VRML features 

• Detailed control of world efficiency 

• Cons: 

• Hard to author complex 3D shapes 

• Requires knowledge of VRML syntax 
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Introducing VRML 

Should I use a world builder? 


• Pros: 

• Easy 3-D drawing and animating user 
interface 

• Little need to learn VRML syntax 

• Cons: 

• May not support all VRML features 

• May not produce most efficient VRML 
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Introducing VRML 

Should I use a 3D modeler and format translator? 

• Pros: 

• Very powerful drawing and animating 
features 

• Can make photo-realistic images too 

• Cons: 

• May not support all VRML features 

• May not produce most efficient VRML 

• Not designed for VRML 

• Often a one-way path from 3D modeler 
into VRML 

• Easy to make shapes that are too complex 
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Introducing VRML 

Should I use a shape generator? 


• Pros: 

• Easy way to generate complex shapes 

• Fractal mountains, logos, etc. 

• Generate VRML from CGI Perl scripts 

• Common to extend science applications to 
generate VRML 

• Cons: 

• Only suitable for narrow set of shapes 

• Best used with other software 
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Introducing VRML 

How do I get VRML software? 
• The VRML Repository at: 
http ://vrml.sdsc.edu 


maintains uptodate information and links for: 


Browser software 
World builder software 
File translators 
Image editors 
Java authoring tools 
Texture libraries 


Sound libraries 

Object libraries 

Specifications 

Tutorials 

Books 

and more... 



16 



17 

Building a VRML world 

VRML file structure 
A sample VRML file 
Understanding the header 
Understanding UTF8 
Using comments 
Using nodes 
Using node type names 
Using fields and values 
Using field names 
Using fields and values 
Summary 
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Building a VRML world 

VRML file structure 

• VRML files contain: 

• The file header 

• Comments - notes to yourself 

• Nodes - nuggets of scene information 

• Fields - node attributes you can change 

• Values - attribute values 

• more... 
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Building a VRML world 

A sample VRML file 

#VRML V2.0 utf8 
# A Cylinder 
Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Cylinder { 
height 2.0 
radius 1.5 

} 

} 
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Building a VRML world 

Understanding the header 

#VRML V2.0 utf8 

• #vrml: File contains VRML text 

• v 2 . o : Text conforms to version 2.0 syntax 

• utf8 : Text uses UTF8 character set 



Building a VRML world 

Understanding UTF8 

utf 8 is an international character set standard 
utf 8 stands for: 

• UCS (Universal Character Set) 
Transformation Format, 8-bit 

Encodes 24,000+ characters for many 
languages 

• ASCII is a subset 
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Building a VRML world 

Using comments 


# A Cylinder 

• Comments start with a number-sign (#) and 
extend to the end of the line 
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Building a VRML world 

Using nodes 


Cylinder { 

} 

• Nodes describe shapes, lights, sounds, etc. 

• Every node has: 

• A node type (shape, cylinder, etc.) 

• A pair of curly-braces 

• Zero or more fields inside the curly-braces 
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Building a VRML world 

Using node type names 

• Node type names are case sensitive 

• Each word starts with an upper-case 
character 

• The rest of the word is lower-case 


Some examples 

Appearance 

Cylinder 

Material 

Shape 


ElevationGrid 

FontStyle 

ImageTexture 

IndexedFaceSet 



Building a VRML world 

Using fields and values 

Cylinder { 

height 2.0 
radius 1.5 

} 

Fields describe node attributes 
Every field has: 

• A field name (height, radius, etc.) 

• A data type (float, integer, etc.) 

• A default value 
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Building a VRML world 

Using field names 

• Field names are case sensitive 

• The first word starts with a lower-case 
character 

• Each additional word starts with an 
upper-case character 

• The rest of the word is lower-case 

• Some examples: 

appearance 
height 
material 
radius 


coordlndex 
diffuseColor 
fontStyle 
textureTransform 



Building a VRML world 

Using fields and values 
Different node types have different fields 
Fields are optional 

• A default value is used if a field is not given 

Fields can be listed in any order 

• The order doesn’t affect the node 
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Building a VRML world 

Summary 

• The file header gives the version and encoding 

• Nodes describe scene content 

• Fields and values specify node attributes 

• Everything is case sensitive 
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Building primitive shapes 

Motivation 

Example 

Syntax: Shape 

Specifying appearance 

Specifying geometry 

Syntax: Box 

Syntax: Cone 

Syntax: Cylinder 

Syntax: Sphere 

Syntax: Text 

Syntax: FontStyle 

Syntax: FontStyle 

Syntax: FontStyle 

Syntax: FontStyle 

A sample primitive shape 

A sample primitive shape 

Building multiple shapes 

A sample file with multiple shapes 

A sample file with multiple shapes 

Summary 
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Building primitive shapes 

Motivation 

• Shapes are the building blocks of a VRM L 
world 

• Primitive Shapes are standard building blocks: 

• Box 

• Cone 

• Cylinder 

• Sphere 

• Text 
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Building primitive shapes 

Example 


| J A 1 

# Text 

i fel i 

c t 

\ $ 

* I 

• ' *3- : 


[ prim.wrl ] 
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Building primitive shapes 

Syntax: Shape 

• A shape node builds a shape 

• appearance - Color and texture 

• geometry - form, or structure 

Shape { 

appearance . . . 

geometry . . . 

} 
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Building primitive shapes 

Specifying appearance 

• Shape appearance is described by appearance 
nodes 

• For now, we’ll use nodes to create a shaded 
white appearance: 

Shape { 

appearance Appearance { 
material Material { } 

} 

geometry . . . 


} 
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Building primitive shapes 

Specifying geometry 

• Shape geometry is built with geometry nodes: 


BOX { . . . } 
Cone { . . . } 
Cylinder { . . . } 
Sphere { . . . } 
Text { . . . } 


• Geometry node fields control dimensions 
• Dimensions usually in meters, but can be 
anything 
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Building primitive shapes 

Syntax: Box 

• A box geometry node builds a box 
• size - width, height, depth 



[ box.wrl ] 


Shape { 

appearance Appearance 
material Material 

} 

geometry Box { 

size 2.0 2.0 2.0 

} 

} 


{ 

{ 1 
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Building primitive shapes 

Syntax: Cone 

• A cone geometry node builds an upright cone 

• height and bottomRadius - cylinder size 

• bottom and side - parts on or off 



[ cone.wrl ] 


Shape { 

appearance Appearance 
material Material 

} 

geometry Cone { 
height 2.0 
bottomRadius 1.0 
bottom TRUE 
side TRUE 

} 

} 


{ 

{ } 
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Building primitive shapes 

Syntax: Cylinder 

• A cylinder geometry node builds an upright 
cylinder 

• height and radius - cylinder size 

• bottom, top, and side - parts on or off 



[ cyl.wrl ] 


Shape { 

appearance Appearance 
material Material 

} 

geometry Cylinder { 
height 2.0 
radius 1.0 
bottom TRUE 
top TRUE 
side TRUE 

} 

} 


{ 

{ } 
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Building primitive shapes 

Syntax: Sphere 

• A sphere geometry node builds a sphere 
• radius - sphere radius 



[ sphere.wri ] 


Shape { 

appearance Appearance 
material Material 

} 

geometry Sphere { 
radius 1.0 

} 

} 


{ 

{ 1 
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Building primitive shapes 

Syntax: Text 

• A Text geometry node builds text 

• string - text to build 

• fontstyie - font control 


TeXl 

Shape 


[ text.wrl ] 


Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Text { 

string [ "Text", 

"Shape" ] 

fontStyle FontStyle { 
style "BOLD" 

} 

} 

} 
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Building primitive shapes 

Syntax: FontStyle 

• A Fontstyie node describes a font 

• family - SERIF, SANS, Or TYPEWRITER 

• Style - BOLD, ITALIC, BOLDITALIC, Or PLAIN 


Serif 

Sans 


rpypewn 161 


[ textfont.wri ] 


Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Text { 
string . . . 

fontStyle FontStyle { 
family "SERIF" 
style "BOLD" 

} 

} 

} 
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Building primitive shapes 

Syntax: FontStyle 

• A Fontstyie node describes a font 

• size - character height 

• spacing - row/column spacing 


Small 

Medium 


Large 


[ textsize.wri ] 


Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Text { 
string . . . 

fontStyle FontStyle { 
size 1.0 
spacing 1.0 

} 


} 


} 
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Building primitive shapes 

Syntax: FontStyle 

• A Fontstyie node describes a font 

• justify - FIRST, BEGIN, MIDDLE, Or END 


J^egin 

Middle 

En(4 


[ textjust.wri ] 


Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Text { 
string . . . 

fontStyle FontStyle { 
justify "BEGIN" 

} 


} 


} 
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Building primitive shapes 

Syntax: FontStyle 

• A Fontstyie node describes a font 

• horizontal - horizontal or vertical 

• leftToRight and topToBottom - direction 


t 

X 

e 

t x c Tjf ext 
1 
C 
X 
t 


[ textvert.wri ] 


Shape { 

appearance Appearance { 
material Material { } 


} 

geometry Text { 
string . . . 

fontStyle FontStyle { 
horizontal FALSE 
leftToRight TRUE 
topToBottom TRUE 

} 


} 


} 
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Building primitive shapes 

A sample primitive shape 

#VRML V2.0 utf8 
# A cylinder 
Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Cylinder { 
height 2.0 
radius 1.5 

} 

} 
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Building primitive shapes 

A sample primitive shape 



[ cylinder.wri ] 
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Building primitive shapes 

Building multiple shapes 

• Shapes are built centered in the world 

• A VRML file can contain multiple shapes 

• Shapes overlap when built at the same 
location 
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Building primitive shapes 

A sample file with multiple shapes 

#VRML V2.0 utf8 

Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Box { 

size 1.0 1.0 1.0 

} 

} 

Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Sphere { 
radius 0.7 

} 

} 
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Building primitive shapes 

A sample file with multiple shapes 



[ space.wri ] 



Building primitive shapes 

Summary 

Shapes are built using a shape node 

Shape geometry is built using geometry nodes 

SUCh as Box, Cone, Cylinder, Sphere, and Text 

Text fonts are controlled using a Fontstyie 
node 
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Transforming shapes 

Motivation 

Example 

Using coordinate systems 

Visualizing a coordinate system 

Transforming a coordinate system 

Syntax: Transform 

Including children 

Translating 

Translating 

Rotating 

Specifying rotation axes 
Rotating 

Using the Right-Hand Rule 
Using the Right-Hand Rule 
Scaling 
Scaling 

Scaling, rotating, and translating 
Scaling, rotating, and translating 
A sample transform group 
A sample transform group 



52 


Transforming shapes 

Motivation 

• By default, all shapes are built at the center of 
the world 

• A transform enables you to 

• Position shapes 

• Rotate shapes 

• Scale shapes 
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Transforming shapes 

Example 



[ towers.wri ] 
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Transforming shapes 

Using coordinate systems 

• A VRML file builds components for a world 

• A file’s world components are built in the 
file’s world coordinate system 

• By default, all shapes are built at the origin of 
the world coordinate system 
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Transforming shapes 

Visualizing a coordinate system 


Y Y 



a. XYZ axes and a simple shape b. XYZ axes and a complex 

shape 
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Transforming shapes 

Transforming a coordinate system 

• A transform creates a coordinate system that 
is 

• Positioned 

• Rotated 

• Scaled 

relative to a parent coordinate system 

• Shapes built in the new coordinate system are 
positioned, rotated, and scaled along with it 
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Transforming shapes 

Syntax: Transform 

.The Transform group node creates a group 
with its own coordinate system 

• translation - position 

• rotation - orientation 

• scale - size 

• children - shapes to build 

Transform { 

translation . . . 

rotation . . . 

scale . . . 

children [ . . . ] 
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Transforming shapes 

Including children 

.The children field includes a list of one or 
more nodes 

Transform { 

• • • 

children [ 

Shape { . . . } 

Shape { . . . } 

Transform { . . . } 

• • • 

] 

} 
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Transforming shapes 

Translating 

• Translation positions a coordinate system in 
X, Y, and Z 

Transform { 

# X Y Z 

translation 2.0 0.0 0.0 
children [ . . . ] 

} 
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Transforming shapes 

Translating 



a. World coordinate system b. New coordinate system, 

translated 2.0 units in X 



c. Shape built in new coordinate system 
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Transforming shapes 

Rotating 

• Rotation orients a coordinate system about a 
rotation axis by a rotation angle 
• Angles are measured in radians 

•radians = degrees / 180.0 * 3.1415927 
Transform { 

# X Y Z Angle 

rotation 0.0 0.0 1.0 0.52 

children [ . . . ] 

} 
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Transforming shapes 

Specifying rotation axes 

• A rotation axis defines a pole to rotate around 

• Like the Earth’s North-South pole 

• Typical rotations are about the X, Y, or Z 
axes: 

Rotate about Axis 

X-Axis 1.0 o.o o.o 

Y-Axis o.o l.o o.o 

Z-Axis o.o o.o l.o 
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Transforming shapes 

Rotating 



a. World coordinate system b. New coordinate system, 

rotated 30.0 degrees around Z 



c. Shape built in new coordinate system 
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Transforming shapes 

Using the Right-Hand Rule 

• Positive rotations are counter-clockwise 

• To help remember positive and negative 
rotation directions: 

• Open your hand 

• Stick out your thumb 

• Aim your thumb in an axis positive 
direction 

• Curl your fingers around the axis 


The curl direction is a positive rotation 
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Transforming shapes 

Using the Right-Hand Rule 



c. Z-axis rotation 
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Transforming shapes 

Scaling 

• Scale grows or shrinks a coordinate system by 
a scaling factor in X, Y, and Z 

Transform { 

# X Y Z 

scale 0.5 0.5 0.5 
children [ . . . ] 

} 
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Transforming shapes 

Scaling 



a. World coordinate system b. New coordinate system, 

scaled by half 


Y 

* 



c. Shape built in new coordinate system 
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Transforming shapes 

Scaling, rotating, and translating 

• Scale, Rotate, and Translate a coordinate 
system, one after the other 

Transform { 

translation 2.0 0.0 0.0 
rotation 0.0 0.0 1.0 0.52 

scale 0.5 0.5 0.5 
children [ . . . ] 

} 

• Read operations bottom-up : 

• The children are scaled, rotated, then 
translated 

• Order is fixed, independent of field order 
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Transforming shapes 

Scaling, rotating, and translating 


Y Y 



a. World coordinate system b. New coordinate system, 

scaled by half, 

rotated 30.0 degrees around Z, 
and translated 2.0 units in X 
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Transforming shapes 

A sample transform group 

Transform { 

translation -2.0 3.0 0.0 
children [ 

Shape { 

appearance Appearance { 
material Material { } 

} 

geometry Cylinder { 
radius 0.3 
height 6.0 
top FALSE 
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Transforming shapes 

A sample transform group 



[ arch.wrl ] [ arches.wri ] 
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Transforming shapes 

Summary 

• All shapes are built in a coordinate system 

.The Transform node creates a new coordinate 
system relative to its parent 

• Transform node fields do 

• translation 

• rotation 

• scale 
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Controlling appearance with materials 

Motivation 
Example 
Syntax: Shape 
Syntax: Appearance 
Syntax: Material 
Specifying colors 
Syntax: Material 

Experimenting with shiny materials 
Example 

A sample world using appearance 
A sample world using appearance 
Summary 



Controlling appearance with materials 

Motivation 


The primitive shapes have a default emissive 
(glowing) white appearance 

You can control a shape’s 

• Shading color 

• Glow color 

• Transparency 

• Shininess 

• Ambient intensity 
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Controlling appearance with materials 

Example 



[ colors.wri ] 
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Controlling appearance with materials 

Syntax: Shape 

• Recall that shape nodes describe: 

• appearance - color and texture 

• geometry - form, or structure 

Shape { 

appearance . . . 

geometry . . . 

} 
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Controlling appearance with materials 

Syntax: Appearance 

• An Appearance node describes overall shape 
appearance 

• material properties - color, transparency, 
etc. 


Shape { 

appearance Appearance { 
material . . . 

} 

geometry . . . 


} 
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Controlling appearance with materials 

Syntax: Material 

• A Material node controls shape material 
attributes 

• diffusecoior - main shading color 

• emissiveColor - glowing color 

• transparency - OpaCJlie Or not 

Shape { 

appearance Appearance { 
material Material { 

diffuseColor 0.8 0.8 0.8 
emissiveColor 0.0 0.0 0.0 
transparency 0.0 

} 

} 

geometry . . . 

} 
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Controlling appearance with materials 

Specifying colors 
• Colors specify: 

• A mixture of red, green, and blue light 

• Values between 0.0 (none) and 1.0 (lots) 


Color 

Red 

Green 

Blue Result 

White 

1.0 

1.0 

1.0 

(white) 

Red 

1.0 

0.0 

0.0 

(red) 

Yellow 

1.0 

1.0 

0.0 

(yellow) 

Cyan 

0.0 

1.0 

1.0 

(cyan) 

Brown 

0.5 

0.2 

0.0 

(brown) 
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Controlling appearance with materials 

Syntax: Material 

• A Material node also controls shape shininess 

• specularColor - highlight Color 

• shininess - highlight size 

• ambientintensity - ambient lighting effects 

Shape { 

appearance Appearance { 
material Material { 

specularColor 0.71 0.70 0.56 
shininess 0.16 
ambientintensity 0.4 

} 

} 

geometry . . . 


} 
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Controlling appearance with materials 

Experimenting with shiny materials 


Description 


ambient diffuse 

Intensity Color 


specular 

Color 


shininess 


Aluminum 

0 

. 30 

0 

.30 

0 

.30 

0 

.50 

0 

.70 

0 

.70 

0 

. 80 

0 . 

. 10 

Copper 

0 

.26 

0 

.30 

0 

.11 

0 

. 00 

0 

.75 

0 

.33 

0 

. 00 

0 . 

. 08 

Gold 

0 

.40 

0 

.22 

0 

. 15 

0 

. 00 

0 

.71 

0 

.70 

0 

.56 

0 . 

.16 

Metalic Purple 

0 

. 17 

0 

.10 

0 

. 03 

0 

.22 

0 

. 64 

0 

. 00 

0 

. 98 

0 . 

.20 

Metalic Red 

0 

. 15 

0 

.27 

0 

. 00 

0 

. 00 

0 

. 61 

0 

. 13 

0 

.18 

0 . 

.20 

Plastic Blue 

0 

. 10 

0 

.20 

0 

.20 

0 

.71 

0 

. 83 

0 

. 83 

0 

. 83 

0 . 

. 12 




82 


Controlling appearance with materials 

Example 


•»H#> ♦ 

♦ ♦ • 


[ shiny.wri ] 
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Controlling appearance with materials 

A sample world using appearance 

Shape { 

appearance Appearance { 
material Material { 

diffuseColor 0.2 0.2 0.2 
emissiveColor 0.0 0.0 0.8 
transparency 0.25 

} 

} 

geometry Box { 

size 2.0 4.0 0.3 


} 


} 
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Controlling appearance with materials 

A sample world using appearance 



[ slabs.wri ] 
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Controlling appearance with materials 

Summary 

• The Appearance node controls overall shape 
appearance 

.The Material node controls overall material 
properties including: 

• Shading color 

• Glow color 

• Transparency 

• Shininess 

• Ambient intensity 
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Grouping nodes 

Motivation 
Syntax: Group 
Syntax: Switch 
Syntax: Transform 
Syntax: Billboard 
Billboard rotation axes 
Billboard rotation axes 
A sample billboard group 
A sample billboard group 
Syntax: Anchor 
A Sample Anchor 
Syntax: Inline 
A sample inlined file 
A sample inlined file 
Summary 
Summary 
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Grouping nodes 

Motivation 

• You can group shapes to compose complex 
shapes 

• VRML has several grouping nodes, including: 


Group { . . . } 
Switch { . . . } 
Transform { . . . } 
Billboard { . . . } 
Anchor { . . . } 
Inline { . . . } 
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Grouping nodes 

Syntax: Group 

• The Group node creates a basic group 

• Every child node in the group is displayed 

Group { 

children [ . . . ] 

} 



Grouping nodes 

Syntax: Switch 

The Switch group node creates a switched 
group 

• Only one child node in the group is 
displayed 

• You select which child 

• Children implicitly numbered from 0 

• A -1 selects no children 

Switch { 

whichChoice 0 
choice [ . . . ] 


} 
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Grouping nodes 

Syntax: Transform 

.The Transform group node creates a group 
with its own coordinate system 
• Every child node in the group is displayed 

Transform { 

translation 0.0 0.0 0.0 

rotation 0.0 1.0 0.0 0.0 

scale 1.0 1.0 1.0 

children [ . . . ] 

} 
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Grouping nodes 

Syntax: Billboard 

• The Billboard group node creates a group 
with a special coordinate system 

• Every child node in the group is displayed 

• Coordinate system is turned to face viewer 

Billboard { 

axisOfRotation 0.0 1.0 0.0 
children [ . . . ] 

} 
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Grouping nodes 

Billboard rotation axes 

• A rotation axis defines a pole to rotate round 
• Similar to a Transform node’s rotation field, 
but no angle (auto computed) 


Y 



a. Viewer moves to the right 



b. Billboard automatically 
rotates to face viewer 
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Grouping nodes 

Billboard rotation axes 

• A standard rotation axis limits rotation to 
spin about that axis 

• A zero rotation axis enables rotation around 
any axis 

Rotate about Axis 

X-Axis 1.0 o.o o.o 

Y-Axis o.o l.o o.o 

Z-Axis o.o o.o l.o 

Any Axis 


o.o o.o o.o 
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Grouping nodes 

A sample billboard group 

Billboard { 

# Y-axis 

axisOfRotation 0.0 1.0 0.0 
children [ 

Shape { . . . } 

Shape { . . . } 

Shape { . . . } 


} 


] 
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Grouping nodes 

A sample billboard group 



[ Y axis: robobilI.wri, 
Any axis: robobil2.wri ] 
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Grouping nodes 

Syntax: Anchor 

• An Anchor node creates a group that acts as a 
clickable anchor 

• Every child node in the group is displayed 

• Clicking any child follows a URL 

• A description names the anchor 

Anchor { 

url "stairwy.wri" 
description "Twisty Stairs" 
children [ . . . ] 
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Grouping nodes 

A Sample Anchor 



[ anchor.wri ] [ stairwy.wri ] 

a. Click on door to go b. ...the stairway world 
to... 
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Grouping nodes 

Syntax: Inline 

• An Inline node creates a special group from 
another VRML file’s contents 

• Children read from file selected by a URL 

• Every child node in group is displayed 

Inline { 

url "table.wrl" 

} 
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Grouping nodes 

A sample inlined file 

Inline { url "table.wrl" } 

• • • 

Transform { 

translation -0.95 0.0 0.0 
rotation 0.0 1.0 0.0 3.14 
children [ 

Inline { url "chair.wrl" } 

] 

} 
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Grouping nodes 

A sample inlined file 



[ table.wri, chair.wri, dinette.wri ] 
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Grouping nodes 

Summary 

• The Group node creates a basic group 

.The Switch node creates a group with 1 choice 
used 

.The Transform node creates a group with a 
new coordinate system 
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Grouping nodes 

Summary 

• The Billboard node creates a group with a 
coordinate system that rotates to face the 
viewer 

.The Anchor node creates a clickable group 
• Clicking any child in the group loads a 
URL 

.The Inline node creates a special group 
loaded from another VRML file 
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Naming nodes 

Motivation 

Syntax: DEF 

Using DEF 

Syntax: USE 

Using USE 

Using named nodes 

A sample use of node names 

A sample use of node names 

Summary 



Naming nodes 

Motivation 


If several shapes have the same geometry or 
appearance, you must use multiple duplicate 
nodes, one for each use 

Instead, define a name for the first occurrence 
of a node 

Later, use that name to share the same node 
in a new context 
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Naming nodes 

Syntax: DEF 

• The def syntax gives a name to a node 

Shape { 

appearance Appearance { 

material DEF RedColor Material { 
diffuseColor 1.0 0.0 0.0 

} 

} 

geometry . . . 

} 
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Naming nodes 

Using DEF 

• def must be in upper-case 

• You can name any node 

• Names can be most any sequence of letters 
and numbers 

• Names must be unique within a file 
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Naming nodes 

Syntax: USE 

• The use syntax uses a previously named node 

Shape { 

appearance Appearance { 

material USE RedColor 

} 

geometry . . . 

} 
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Naming nodes 

Using USE 

• use must be in upper-case 

• A re-use of a named node is called an instance 

• A named node can have any number of 
instances 

• Each instance shares the same node 
description 

• You can only instance names defined in the 
same file 
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Naming nodes 

Using named nodes 

• Naming and using nodes: 

• Saves typing 

• Reduces file size 

• Enables rapid changes to shapes with the 
same attributes 

• Speeds browser processing 

• Names are also necessary for animation... 
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Naming nodes 

A sample use of node names 


Inline { url "table.wri" } 

Transform { 

translation 0.95 0.0 0.0 

children DEF Chair Inline { url "chair.wri" } 

} 

Transform { 

translation -0.95 0.0 0.0 
rotation 0.0 1.0 0.0 3.14 
children USE Chair 

} 

Transform { 

translation 0.0 0.0 0.95 
rotation 0.0 1.0 0.0 -1.57 
children USE Chair 

} 

Transform { 

translation 0.0 0.0 -0.95 
rotation 0.0 1.0 0.0 1.57 
children USE Chair 


} 
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Naming nodes 

A sample use of node names 



[ dinette.wri ] 
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Naming nodes 

Summary 

• def names a node 

• use uses a named node 
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Summary examples 


A fairy-tale castle 
A bar plot 
A simple spaceship 
A juggling hand 
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Summary examples 

A fairy-tale castle 

• cylinder nodes build the towers 

• cone nodes build the roofs and tower bottoms 



[ castle.wri ] 
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Summary examples 

A bar plot 

• box nodes create the bars 

• Text nodes provide bar labels 

• Billboard nodes keep the labels facing the 
viewer 



[ barplot.wrl ] 
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Summary examples 

A simple spaceship 

• sphere nodes make up all parts of the ship 

• Transform nodes scale the spheres into ship 
parts 



[ space2.wri ] 
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Summary examples 

A juggling hand 

• cylinder and sphere nodes build fingers and 
joints 

• Transform nodes articulate the hand 



[ hand.wrl ] 
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Introducing animation 

Motivation 

Building animation circuits 

Examples 

Routing events 

Using node inputs and outputs 

Sample inputs 

Sample outputs 

Syntax: ROUTE 

Event data types 

Event data types 

Event data types 

Following naming conventions 

A sample animation 

A sample animation 

Using multiple routes 

Summary 
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Introducing animation 

Motivation 

• Nodes like Billboard and Anchor have built-in 
behavior 

• You can create your own behaviors to make 
shapes move, rotate, scale, blink, and more 

• We need a means to trigger, time, and 
respond to a sequence of events in order to 
provide better user/world interactions 



123 


Introducing animation 

Building animation circuits 

• Almost every node can be a component in an 
animation circuit 

• Nodes act like virtual electronic parts 

• Nodes can send and receive events 

• Wired routes connect nodes together 

• An event is a message sent between nodes 

• A data value (such as a translation) 

• A time stamp (when did the event get sent) 
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Introducing animation 

Examples 


• To spin a shape: 

• Connect a node that sends rotation events to 

a Transform node’s rotation field 


• To blink a shape: 

• Connect a node that sends color events to a 

Material node’s diffuseColor field 
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Introducing animation 

Routing events 

• To set up an animation circuit, you need three 
things: 

1. A node which sends events 

• The node must be named with def 

2. A node which receives events 

• The node must be named with def 


3. A route connecting them 



126 


Introducing animation 

Using node inputs and outputs 

• Every node has fields, inputs, and outputs: 

• field: A stored value 

• eventln: An input 

• eventOut: An output 

• An exposedField is a short-hand for a field , 
eventln, and eventOut 
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Introducing animation 

Sample inputs 

• A Transform node has these eventlns: 

• set_translation 

• set_rotation 

• set_scale 

• A Material node has these eventlns: 

• set_diffuseColor 

• set_emissiveColor 

• set_transparency 
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Introducing animation 

Sample outputs 


• An Orientationlnterpolator node has this 

eventOut: 

• vaiue_changed to send rotation values 


• A Positionlnterpolator node has this 

eventOut: 

• vaiue_changed to send position (translation) 
values 

• A TimeSensor node has this eventOut: 

• time to send time values 
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Introducing animation 

Syntax: ROUTE 

• A route statement connects two nodes 
together using 

• The sender’s node name and eventOut 
name 

• The receiver’s node name and eventln 
name 


ROUTE MySender.rotation_changed 
TO MyReceiver.set_rotation 


• route and to must be in upper-case 
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Introducing animation 

Event data types 

• Sender and receiver event data types must 
match! 

• Data types have names with a standard 
format, such as: 

SFString, SFRotation, OF MFColor 

Character Values 

1 s: Single value 

m: Multiple values 

2 Always an f 

remainder Name of data type, such as string, 

Rotation, or Color 
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Introducing animation 

Event data types 


Data type Meaning 


SFBool 

Boolean, true or false value 

SFColor, MFColor 

RGB color value 

SFFloat, MFFloat 

Floating point value 

SFImage 

Image value 

SFInt32, MFInt32 

Integer value 

SFNode, MFNode 

Node value 
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Introducing animation 

Event data types 


Data type 

Meaning 

SFRotation, MFRotation 

Rotation value 

SFString, MFString 

Text string value 

SFTime 

Time value 

SFVec2f, MFVec2f 

XY floating point value 

SFVec3f, MFVec3f 

XYZ floating point value 
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Introducing animation 

Following naming conventions 

• Most nodes have exposedFields 

• If the exposed field name is xxx, then: 

• set_xxx is an eventln to set the field 

• xxx_changed is an eventOut that sends when 
the field changes 

.The set_ and _changed sufixes are optional 
but recommended for clarity 


.The Transform node has: 

• rotation field 

• set_rotation eveiltlll 

• rotation_changed eventOut 
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Introducing animation 

A sample animation 

DEF Touch TouchSensor { } 

DEF Timerl TimeSensor { . . . } 

DEF Rotl Orientationlnterpolator { . . . } 

DEF Framel Transform { 
children [ 

Shape { . . . } 

] 

} 

ROUTE Touch.touchTime TO Timerl.set_startTime 

ROUTE Timerl.fraction_changed TO Rotl.set_fraction 
ROUTE Rotl.value_changed TO Framel.set_rotation 
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Introducing animation 

A sample animation 



[ colors.wri ] 



136 


Introducing animation 

Using multiple routes 

• You can have fan-out 

• Multiple routes out of the same sender 

• You can have fan-in 

• Multiple routes into the same receiver 



Introducing animation 

Summary 

Connect senders to receivers using routes 

eventlns are inputs, and eventOuts are outputs 

A route names the sender. eventOut, and the 
receiver, eventln 

• Data types must match 

You can have multiple routes into or out of a 
node 
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Animating transforms 

Motivation 

Example 

Controlling time 

Using absolute time 

Using fractional time 

Syntax: TimeSensor 

Using timers 

Using timers 

Using timers 

Using timer outputs 

A sample time sensor 

A sample time sensor 

Converting time to position 

Interpolating positions 

Syntax: Positionlnterpolator 

Using position interpolator inputs and outputs 

A sample using position interpolators 

A sample using position interpolators 

Using other types of interpolators 

Syntax: Orientationlnterpolator 



Syntax: Positionlnterpolator 

Syntax: Colorlnterpolator 

Syntax: Scalarlnterpolator 

A sample using other interpolators 

Summary 

Summary 

Summary 



Animating transforms 

Motivation 


An animation changes something over time: 

• position - a car driving 

• orientation - an airplane banking 

• color - seasons changing 

Animation requires control over time: 

• When to start and stop 

• How fast to go 



141 


Animating transforms 

Example 



[ floater.wri ] 
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Animating transforms 

Controlling time 

• A TimeSensor node is similar to a stop watch 

• You control the start and stop time 

• The sensor generates time events while it is 
running 

• To animate, route time events into other nodes 
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Animating transforms 

Using absolute time 

• A TimeSensor node generates absolute and 
fractional time events 

• Absolute time events give the wall-clock time 

• Absolute time is measured in seconds since 
12:00am January 1,1970! 

• Useful for triggering events at specific dates 
and times 
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Animating transforms 

Using fractional time 

• Fractional time events give a number from 0.0 
to 1.0 

• When the sensor starts, it outputs a 0.0 

• At the end of a cycle , it outputs a 1.0 

• The number of seconds between 0.0 and 1.0 
is controlled by the cycle interval 


• The sensor can loop forever, or run through 
only one cycle and stop 



145 


Animating transforms 

Syntax: TimeSensor 

• A TimeSensor node generates events based 
upon time 

• startTime and stopTime - when to I'll 11 

• cyclelnterval - IlOW long a Cycle is 

• loop - whether or not to repeat cycles 

TimeSensor { 

cyclelnterval 1.0 
loop FALSE 
startTime 0.0 
stopTime 0.0 
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Animating transforms 

Using timers 

• To create a continuously running timer: 

loop TRUE 

stopTime <= startTime 

• When stop time <= start time, stop time is 
ignored 
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Animating transforms 

Using timers 

• To run until the stop time: 

loop TRUE 

stopTime > startTime 

• To run one cycle then stop: 

loop FALSE 

stopTime <= startTime 
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Animating transforms 

Using timers 

.The set_startT±me input event: 

• Sets when the timer should start 

• The set_stopT±me input event: 

• Sets when the timer should stop 
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Animating transforms 

Using timer outputs 

.The is Active output event; 

• Outputs true at timer start 

• Outputs false at timer stop 

• The time output event: 

• Outputs the absolute time 


• The fraction_changed Output event: 

• Outputs values from 0.0 to 1.0 during a 
cycle 

• Resets to 0.0 at the start of each cycle 
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Animating transforms 

A sample time sensor 

Shape { 

appearance Appearance { 

material DEF MonolithlFacade Material { 
diffuseColor 0.2 0.2 0.2 

} 

} 

geometry Box { size 2.0 4.0 0.3 } 

} 

DEF MonolithlTimer TimeSensor { 
cyclelnterval 4.0 
loop FALSE 
startTime 0.0 
stopTime 0.1 

} 

ROUTE MonolithlTouch.touchTime 

TO MonolithlTimer.set_startTime 
ROUTE MonolithlTimer.fraction_changed 
TO MonolithlFacade.set_transparency 
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Animating transforms 

A sample time sensor 



[ monolith.wrl ] 
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Animating transforms 

Converting time to position 

• To animate the position of a shape you 
provide: 

• A list of key positions for a movement path 

• A time at which to be at each position 

• An interpolator node converts an input time to 
an output position 

• When a time is in between two key 
positions, the interpolator computes an 
intermediate position 
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Animating transforms 

Interpolating positions 

• Each key position along a path has: 

• A key value (such as a position) 

• A key fractional time 

• Interpolation fills in values between your key 
values: 


Fractional Time Position 



0.0 0.0 0.0 

0.1 

0.4 0.1 0.0 

0.2 

0.8 0.2 0.0 


0.5 


4.0 1.0 0.0 



154 


Animating transforms 

Syntax: Positionlnterpolator 


• A Positionlnterpolator node describes a 
position path 

• key - key fractional times 

• keyvaiue - key positions 

Positionlnterpolator { 
key [0.0, . . . ] 

keyValue [0.00.00.0, . . . ] 

} 


• Typically route into a Transform node’s 
set_translation input 
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Animating transforms 

Using position interpolator inputs and outputs 


• The set_fract±on input: 

• Sets the current fractional time along the 
key path 


.The value_changed Output: 

• Outputs the position along the path each 
time the fraction is set 
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Animating transforms 

A sample using position interpolators 

DEF Particlel Transform { 
children [ 

Shape { . . . } 

] 

} 

DEF Timerl TimeSensor { 
cyclelnterval 12.0 
loop TRUE 
startTime 0.0 
stopTime -1.0 

} 

DEF Positionl Positionlnterpolator { 
key [0.0, . . . ] 

keyValue [0.00.00.0, . . .] 

} 

ROUTE Timerl.fraction__changed TO Positionl.set_fraction 

ROUTE Positionl.value_changed TO Particlel.set_translation 
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Animating transforms 

A sample using position interpolators 



[ spiral.wri ] 
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Animating transforms 

Using other types of interpolators 


Animate position 
Animate rotation 
Animate scale 
Animate color 
Animate transparency 


Positionlnterpolator 
Orientationlnterpolator 
Positionlnterpolator 
ColorInterpolator 
ScalarInterpolator 



159 


Animating transforms 

Syntax: Orientationlnterpolator 


• A Orientationlnterpolator node describes an 

orientation path 

• key - key fractional times 

• keyvaiue - key rotations (axis and angle) 


Orientationlnterpolator { 
key [0.0, . . . ] 

keyValue [ 0.0 1.0 0.0 0.0, . . . ] 

} 

• Typically route into a Transform node’s 
set_rotation input 
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Animating transforms 

Syntax: Positionlnterpolator 


• A Positionlnterpolator node describes a 
position or scale path 

• key - key fractional times 

• keyvaiue - key positions (or scales) 

Positionlnterpolator { 
key [0.0, . . . ] 

keyValue [0.00.00.0, . . . ] 

} 


• Typically route into a Transform node’s 
set_scale input 
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Animating transforms 

Syntax: Colorlnterpolator 

• coiorinterpoiator node describes a color path 

• key - key fractional times 

• keyvaiue - key colors (red, green, blue) 

Colorlnterpolator { 

key [0.0, . . . ] 

keyValue [1.01.00.0, . . . ] 

} 

• Typically route into a Material node’s 

set_diffuseColor Or set_emissiveColor inputs 
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Animating transforms 

Syntax: Scalarlnterpolator 

• scaiarinterpoiator node describes a scalar 
path 

• key - key fractional times 

• keyvaiue - key scalars (used for anything) 

Scalarlnterpolator { 
key [0.0, . . . ] 

keyValue [4.5, . . . ] 

} 

• Often route into a Material node’s 
set_transparency input 
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Animating transforms 

A sample using other interpolators 



[ squisher.wri ] 
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Animating transforms 

Summary 

.The TimeSensor node’s fields control 

• Timer start and stop times 

• The cycle interval 

• Whether the timer loops or not 

• The sensor outputs 

• true/false on isActive at start and stop 

• absolute time on time while running 

• fractional time on fraction_changed while 
running 
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Animating transforms 

Summary 

• Interpolators use key times and values and 
compute intermediate values 

• All interpolators have: 

• a set_fract±on input to set the fractional 
time 

• a vaiue_changed output to send new values 
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Animating transforms 

Summary 

• The Positioninterpoiator node converts times 
to positions (or scales) 


• The Orientationlnterpolator node Converts 

times to rotations 

• The coiorinterpoiator node converts times to 
colors 

• The Scaiarinterpoiator node converts times to 
scalars (such as transparencies) 
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Sensing viewer actions 


Motivation 

Using action sensors 

Sensing shapes 

Syntax: TouchSensor 

A sample use of a TouchSensor node 

A sample use of a TouchSensor node 

Syntax: SphereSensor 

Syntax: CylinderSensor 

Syntax: PlaneSensor 

Using multiple sensors 

A sample use of a multiple sensors 

Summary 



Sensing viewer actions 

Motivation 


You can sense when the viewer’s cursor: 

• Is over a shape 

• Has touched a shape 

• Is dragging atop a shape 

You can trigger animations on a viewer’s 
touch 

You can enable the viewer to move and rotate 
shapes 
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Sensing viewer actions 

Using action sensors 

• There are four main action sensor types: 

• TouchSensor senses touch 

• SphereSensor SdlSeS drags 

• CylinderSensor senses drags 

• pianesensor senses drags 

.The Anchor node is a special-purpose action 
sensor with a built-in response 
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Sensing viewer actions 

Sensing shapes 

• All action sensors sense all shapes in the same 
group 

• Sensors trigger when the viewer’s cursor 
touches a sensed shape 
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Sensing viewer actions 

Syntax: TouchSensor 

• A TouchSensor node senses the cursor’s touch 

• isOver - send true/false when cursor 
over/not over 

• isActive - send true/false when mouse 
button pressed/released 

• touchTime - send time when mouse button 
released 

Transform { 

children [ 

DEF Touched TouchSensor { } 

Shape { . . . } 

] 

} 
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Sensing viewer actions 

A sample use of a TouchSensor node 

DEF Touch TouchSensor { } 

DEF Timerl TimeSensor { . . . } 

DEF Rotl Orientationlnterpolator { . . . } 

DEF Framel Transform { 
children [ 

Shape { . . . } 

] 

} 

ROUTE Touch.touchTime TO Timerl.set_startTime 

ROUTE Timerl.fraction_changed TO Rotl.set_fraction 
ROUTE Rotl.value_changed TO Framel.set_rotation 
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Sensing viewer actions 

A sample use of a TouchSensor node 



[ colors.wri ] 
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Sensing viewer actions 

Syntax: SphereSensor 

• A SphereSensor node senses a cursor drag and 
generates rotations as if rotating a ball 

• isActive - sends true/false when mouse 
button pressed/released 

• rotation_changed - sends rotation during a 
drag 

Transform { 

children [ 

DEF Rotator SphereSensor { } 

DEF RotateMe Transform { . . . } 

] 

} 

ROUTE Rotator.rotation_changed TO RotateMe.set_rotation 
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Sensing viewer actions 

Syntax: CylinderSensor 

• A CylinderSensor node senses a cursor drag 
and generates rotations as if rotating a 
cylinder 

• isActive - sends true/false when mouse 
button pressed/released 

• rotation_changed - sends rotation during a 
drag 

Transform { 

children [ 

DEF Rotator CylinderSensor { } 

DEF RotateMe Transform { . . . } 

] 

} 

ROUTE Rotator.rotation_changed TO RotateMe.set_rotation 
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Sensing viewer actions 

Syntax: PlaneSensor 

• A PlaneSensor node senses a cursor drag and 
generates translations as if sliding on a plane 

• isActive - sends true/false when mouse 
button pressed/released 

• translation_changed - sends translations 

during a drag 

Transform { 

children [ 

DEF Mover PlaneSensor { } 

DEF MoveMe Transform { . . . } 

] 

} 

ROUTE Mover.translation_changed TO MoveMe.set_translatior 
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Sensing viewer actions 

Using multiple sensors 

• Multiple sensors can sense the same shape but. 
• • 

• If sensors are in the same group: 

• They all respond 

• If sensors are at different depths in the 
hierarchy: 

• The deepest sensor responds 

• The other sensors do not respond 
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Sensing viewer actions 

A sample use of a multiple sensors 



[ lamp.wrl ] 
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Sensing viewer actions 

Summary 

• Action sensors sense when the viewer’s 
cursor: 

• is over a shape 

• has touched a shape 

• is dragging atop a shape 

• Sensors convert viewer actions into events to 

• Start and stop animations 

• Orient shapes 

• Position shapes 
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Building shapes out of points, lines, and faces 

Motivation 

Example 

Building shapes using coordinates 

Syntax: Coordinate 

Using geometry coordinates 

Syntax: PointSet 

A sample PointSet node shape 

Syntax: IndexedLineSet 

Using line set coordinate indexes 

Using line set coordinate index lists 

A sample IndexedLineSet node shape 

Syntax: IndexedFaceSet 

Using face set coordinate index lists 

Using face set coordinate index lists 

A sample IndexedFaceSet node shape 

Syntax: IndexedFaceSet 

Using shape control 

Syntax: Coordinatelnterpolator 

Interpolating coordinate lists 

A sample use of a Coordinatelnterpolator node 



Summary 

Summary 

Summary 
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Building shapes out of points, lines, and faces 

Motivation 

• Complex shapes are hard to build with 
primitive shapes 

• Terrain 

• Animals 

• Plants 

• Machinery 

• Instead, build shapes out of atomic 
components: 

• Points, lines, and faces 
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Building shapes out of points, lines, and faces 

Example 



[ isosurf.wri ] 



184 


Building shapes out of points, lines, and faces 

Building shapes using coordinates 

• Shape building is like a 3-D connect-the-dots 
game: 

• Place dots at 3-D locations 

• Connect-the-dots to form shapes 

• A coordinate specifies a 3-D dot location 

• Measured relative to a coordinate system 
origin 


• A geometry node specifies how to connect the 
dots 
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Building shapes out of points, lines, and faces 

Syntax: Coordinate 


• A coordinate node contains a list of 
coordinates for use in building a shape 

Coordinate { 
point [ 

# X Y Z 

2.0 1.0 3 . 0 , 

4.0 2.5 5 . 3 , 

• • • 

] 

} 
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Building shapes out of points, lines, and faces 

Using geometry coordinates 

• Build coordinate-based shapes using geometry 
nodes: 

• PointSet 

• IndexedLineSet 

• IndexedFaceSet 


• For all three nodes, use a coordinate node as 
the value of the coord field 
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Building shapes out of points, lines, and faces 

Syntax: PointSet 

• A Pointset geometry node creates geometry 
out of points 

• One point (a dot) is placed at each 
coordinate 

Shape { 

appearance Appearance { . . . } 

geometry PointSet { 

coord Coordinate { 

point [ ... ] 

} 

} 
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Building shapes out of points, lines, and faces 

A sample PointSet node shape 



[ ptplot.wrl ] 
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Building shapes out of points, lines, and faces 

Syntax: IndexedLineSet 

• An IndexedLineSet geometry node creates 
geometry out of lines 

• A straight line is drawn between pairs of 
selected coordinates 

Shape { 

appearance Appearance { . . . } 

geometry IndexedLineSet { 
coord Coordinate { 

point [ ... ] 

} 

coordlndex [ . . . ] 

} 

} 
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Building shapes out of points, lines, and faces 

Using line set coordinate indexes 

• Each coordinate in a coordinate node is 
implicitly numbered 

• Index 0 is the first coordinate 

• Index 1 is the second coordinate, etc. 

• To build a line shape 

• Make a list of coordinates, using their 
indexes 

• List coordinate indexes in the coordlndex 
field of the IndexedLineSet node 
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Building shapes out of points, lines, and faces 

Using line set coordinate index lists 

• A line is drawn between pairs of coordinate 
indexes 

• -l marks a break in the line 

• A line is not automatically drawn from the 
last index back to the first 

coordlndex [ 1 , 0, 3, 8, -1, 5, 9, 0 ] 

Draw line from 1 to 0 to 
3 to 8 

End line, start next 

Draw line from 5 to 9 to 
0 


-i, 

5, 9, 0 
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Building shapes out of points, lines, and faces 

A sample IndexedLineSet node shape 



[ lnplot.wrl ] 
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Building shapes out of points, lines, and faces 

Syntax: IndexedFaceSet 

• An IndexedF aceSet geometry node creates 
geometry out of faces 
• A flat face (polygon) is drawn using an 
outline specified by coordinate indexes 

Shape { 

appearance Appearance { . . . } 

geometry IndexedFaceSet { 
coord Coordinate { 

point [ ... ] 

} 

coordlndex [ . . . ] 

} 
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Building shapes out of points, lines, and faces 

Using face set coordinate index lists 

• To build a face shape 

• Make a list of coordinates, using their 
indexes 

• List coordinate indexes in the coordlndex 
field of the IndexedFaceSet node 
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Building shapes out of points, lines, and faces 

Using face set coordinate index lists 

• A triangle is drawn connecting sequences of 
coordinate indexes 

• -l marks a break in the sequence 

• Each face is automatically closed, 
connecting the last index back to the first 

coordlndex [ 1 , 0, 3, 8, - 1 , 5, 9, 0 ] 

i, o, 3, 8 Draw face from 1 to 0 to 

3 to 8 to 1 

End face, start next 

Draw face from 5 to 9 to 
0 to 5 


-i, 

5, 9, 0 
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Building shapes out of points, lines, and faces 

A sample IndexedFace Set node shape 



[ lightng.wri ] 



197 


Building shapes out of points, lines, and faces 

Syntax: IndexedFaceSet 

• An IndexedF aceSet geometry node creates 
geometry out of faces 

• solid - shape is solid 

• ccw - faces are counter-clockwise 

• convex - faces are convex 

Shape { 

appearance Appearance { . . . } 

geometry IndexedFaceSet { 

coord Coordinate { . . . } 

coordlndex [ . . . ] 

solid TRUE 
ccw TRUE 
convex TRUE 


} 


} 
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Building shapes out of points, lines, and faces 

Using shape control 

• A solid shape is one where the insides are 
never seen 

• If never seen, don’t attempt to draw them 

• When solid true, the back sides (inside) of 
faces are not drawn 

• The front of a face has coordinates in 
counter-clockwise order 

• When ccw false, the other side is the front 

• Faces are assumed to be convex 

• When convex false, concave faces are 
automatically broken into multiple convex 
faces 
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Building shapes out of points, lines, and faces 

Syntax: Coordinatelnterpolator 


• A Coordinatelnterpolator node describes a 

coordinate path 

• keys - key fractions 

• values - key coordinate lists (X,Y,Z lists) 


Coordinatelnterpolator { 
key [0.0, . . . ] 

keyValue [0.01.00.0, . . . ] 

} 

• Typically route into a coordinate node’s 
set point input 
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Building shapes out of points, lines, and faces 

Interpolating coordinate lists 


• A Coordinatelnterpolator node interpolates 

lists of coordinates 

• Each output is a list of coordinates 

• If n output coordinates are needed for t 
fractional times: 

• n x t coordinates are needed in the key 
value list 
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Building shapes out of points, lines, and faces 

A sample use of a Coordinatelnterpolator node 



[ wiggle.wri ] 
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Building shapes out of points, lines, and faces 

Summary 

• Shapes are built by connecting together 
coordinates 

• Coordinates are listed in a coordinate node 

• Coordinates are implicitly numbers starting 
at 0 

• Coordinate index lists give the order in which 
to use coordinates 
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Building shapes out of points, lines, and faces 

Summary 

• The Pointset node draws a dot at every 
coordinate 

.The coord field value is a coordinate node 

.The IndexedLineSet node draws lines between 
coordinates 

.The coord field value is a coordinate node 
.The coordindex field value is a list of 
coordinate indexes 
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Building shapes out of points, lines, and faces 

Summary 

• The indexedFaceSet node draws faces outlined 
by coordinates 

.The coord field value is a coordinate node 
• The coordindex field value is a list of 
coordinate indexes 


• The Coordinatelnterpolator node Converts 

times to coordinates 
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Building elevation grids 

Motivation 

Example 

Syntax: ElevationGrid 
Syntax: ElevationGrid 
Syntax: ElevationGrid 
A sample elevation grid 
A sample elevation grid 
Summary 
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Building elevation grids 

Motivation 

• Building terrains is very common 

• Hills, valleys, mountains 

• Other tricky uses... 

• You can build a terrain using an 

IndexedFaceSet node 


• You can build terrains more efficiently using 

an ElevationGrid node 
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Building elevation grids 

Example 




[ 16 x 16: mountl6.wri ] [ 32 x 32: mount32.wri ] 



[ 128 x 128: mountl28.wri ] 
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Building elevation grids 

Syntax: ElevationGrid 

• An ElevationGrid geometry node creates 
terrains 

• xDimension and zDimension - grid size 

• xspacing and zSpacing - row and column 
distances 

Shape { 

appearance Appearance { . . . } 

geometry ElevationGrid { 
xDimension 3 
zDimension 2 
xSpacing 1.0 
zSpacing 1.0 


} 


} 
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Building elevation grids 

Syntax: ElevationGrid 


• An ElevationGrid geometry node creates 
terrains 

• height - elevations at grid points 

Shape { 

appearance Appearance { . . . } 

geometry ElevationGrid { 


height [ 

0.0, -0.5, 0.0, 
0.2, 4.0, 0.0 

] 


} 


} 
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Building elevation grids 

Syntax: ElevationGrid 

• An ElevationGrid geometry node creates 
terrains 

• solid - shape is solid 

• ccw - faces are counter-clockwise 

Shape { 

appearance Appearance { . . . } 

geometry ElevationGrid { 

• • • 

solid TRUE 
ccw TRUE 


} 


} 
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Building elevation grids 

A sample elevation grid 

Shape { 


appearance Appearance { 
geometry ElevationGrid 
xDimension 9 
zDimension 9 
xSpacing 1.0 
zSpacing 1.0 
solid FALSE 
height [ 

0.0, 0.0, 0.5, 1.0, 
0 . 0 , 0 . 0 , 0 . 0 , 0 . 0 , 
0.0, 0.0, 0.5, 0.5, 
0.0, 0.0, 0.5, 2.0, 
1.0, 2.5, 3.0, 4.5, 
0.5, 2.0, 2.0, 2.5, 
0.0, 0.0, 0.5, 1.5, 
0 . 0 , 0 . 0 , 0 . 0 , 0 . 0 , 
0 . 0 , 0 . 0 , 0 . 0 , 0 . 0 , 

] 

} 


• • . 1 

{ 


0.5, 0.0, 0.0, 0.0, 0.0, 

2.5, 0.5, 0.0, 0.0, 0.0, 

3.0, 1.0, 0.5, 0.0, 1.0, 

4.5, 2.5, 1.0, 1.5, 0.5, 

5.5, 3.5, 3.0, 1.0, 0.0, 

3.5, 4.0, 2.0, 0.5, 0.0, 

1.0, 2.0, 3.0, 1.5, 0.0, 

0.0, 0.0, 2.0, 1.5, 0.5, 

0.0, 0.0, 0.5, 0.0, 0.0, 
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Building elevation grids 

A sample elevation grid 



[ mount.wrl ] 
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Building elevation grids 

Summary 

• An ElevationGrid node efficiently creates a 
terrain 

• Grid size is specified in the xD intension and 
zDimension fields 


• Grid spacing is specified in the xspacing and 
zSpacing field 


• Elevations at each grid point are specified in 
the height field 
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Building extruded shapes 

Motivation 

Examples 

Creating extruded shapes 
Extruding along a straight line 
Extruding around a circle 
Extruding along a helix 
Syntax: Extrusion 
Syntax: Extrusion 

Squishing and twisting extruded shapes 
Syntax: Extrusion 

Sample extrusions with scale and rotation 
Summary 
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Building extruded shapes 

Motivation 

• Extruded shapes are very common 

• Tubes, pipes, bars, vases, donuts 

• Other tricky uses... 

• You can build extruded shapes using an 

IndexedFaceSet node 


• You can build extruded shapes more easily 
and efficiently using an Extrusion node 
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Building extruded shapes 

Examples 



[ slide.wri ] 


[ donut, wrl ] 
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Building extruded shapes 

Creating extruded shapes 

• Extruded shapes are described by 

• A 2-D cross-section 

• A 3-D spine along which to sweep the 
cross-section 

• Extruded shapes are like long bubbles created 
with a bubble wand 

• The bubble wand’s outline is the 

cross-section 

• The path along which you swing the wand 

is the spine 
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Building extruded shapes 

Extruding along a straight line 


♦x 


a. Square cross-section b. Straight spine 




c. Resulting extrusion 
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Building extruded shapes 

Extruding around a circle 



a. Circular cross-section 



b. Circular spine 



c. Resulting extrusion 






221 


Building extruded shapes 

Extruding along a helix 



a.. Half-circle 
cross-section 



b. Helical spine 



c. Resulting extrusion 
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Building extruded shapes 

Syntax: Extrusion 

• An Extrusion geometry node creates extruded 
geometry 

• cross-section - 2-1) cross-section 

• spine - 3-D sweep path 

• endCap and beginCap - Cap ends 
Shape { 

appearance Appearance { . . . } 

geometry Extrusion { 

crossSection [ . . . ] 

spine [ . . . ] 

endCap TRUE 
beginCap TRUE 
• • • 

} 

} 
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Building extruded shapes 

Syntax: Extrusion 

• An Extrusion geometry node creates extruded 
geometry 

• solid - shape is solid 

• ccw - faces are counter-clockwise 

• convex - faces are convex 

Shape { 

appearance Appearance { . . . } 

geometry Extrusion { 

• • • 

solid TRUE 
ccw TRUE 
convex TRUE 

} 

} 
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Building extruded shapes 

Squishing and twisting extruded shapes 

• You can scale the cross-section along the spine 

• Vases, musical instruments 

• Surfaces of revolution 

• You can rotate the cross-section along the 
spine 

• Twisting ribbons 
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Building extruded shapes 

Syntax: Extrusion 

• An Extrusion geometry node creates geometry 
using 

• scale - cross-section scaling per spine point 

• orientation - cross-section rotation per 
spine point 

Shape { 

appearance Appearance { . . . } 

geometry Extrusion { 

• • • 

scale [ . . . ] 

orientation [ . . . ] 

} 

} 
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Building extruded shapes 

Sample extrusions with scale and rotation 



[ horn.wrl ] [ bartwist.wrl ] 
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Building extruded shapes 

Summary 

• An Extrusion node efficiently creates extruded 
shapes 

.The crossSection field specifies the 
cross-section 

• The spine field specifies the sweep path 


.The scale and orientation fields Specify 

scaling and rotation at each spine point 
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Controlling color on coordinate-based geometry 

Motivation 

Example 

Syntax: Color 

Binding colors 

Syntax: PointSet 

A sample PointSet node shape 

Syntax: IndexedLineSet 

Controlling color binding for line sets 

A sample IndexedLineSet node shape 

Syntax: IndexedFaceSet 

Controlling color binding for face sets 

A sample IndexedFaceSet node shape 

Syntax: ElevationGrid 

Controlling color binding for elevation grids 

A sample ElevationGrid node shape 

Summary 
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Controlling color on coordinate-based geometry 

Motivation 

.The Material node gives an entire shape the 
same color 

• You can provide colors for individual parts of 
a shape using a color node 
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Controlling color on coordinate-based geometry 

Example 


4 ^ 


[ cmount.wri 1 
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Controlling color on coordinate-based geometry 

Syntax: Color 

• A color node contains a list of RGB values 
(similar to a coordinate node) 

Color { 

color [1.0 0.0 0.0, . . . ] 

} 

• Used as the color field value of 

IndexedFaceSet, IndexedLineSet, PointSet OF 
ElevationGrid nodes 
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Controlling color on coordinate-based geometry 

Binding colors 

• Colors in the color node override those in the 
Material node 


• You can bind colors 

• To each point, line, or face 

• To each coordinate in a line, or face 
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Controlling color on coordinate-based geometry 

Syntax: PointSet 

• A Pointset geometry node creates geometry 
out of points 

• color - provides a list of colors 

• Always binds one color to each point, in 
order 

Shape { 

appearance Appearance { . . . } 

geometry PointSet { 

coord Coordinate { . . . } 

color Color { . . . } 

} 

} 
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Controlling color on coordinate-based geometry 

A sample PointSet node shape 



[ scatter.wri ] 
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Controlling color on coordinate-based geometry 

Syntax: IndexedLineSet 

• An IndexedLineSet geometry node creates 
geometry out of lines 

• color - list of colors 

• coiorindex - selects colors from list 

• colorPerVertex - control color binding 

Shape { 

appearance Appearance { . . . } 

geometry IndexedLineSet { 

coord Coordinate { . . . } 

coordlndex [ . . . ] 

color Color { . . . } 

coiorindex [ . . . ] 

colorPerVertex TRUE 

} 

} 
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Controlling color on coordinate-based geometry 

Controlling color binding for line sets 

.The colorPerVertex field controls how color 
indexes are used 

• false: one color index to each line (ending 
at -1 coordinate indexes) 

• true: one color index to each coordinate 
index of each line (including -1 coordinate 
indexes) 
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Controlling color on coordinate-based geometry 

A sample IndexedLineSet node shape 



[ burst.wrl ] 
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Controlling color on coordinate-based geometry 

Syntax: IndexedFaceSet 

• An indexedFaceSet geometry node creates 
geometry out of faces 

• color - list of colors 

• coiorindex - selects colors from list 

• colorPerVertex - control color binding 

Shape { 

appearance Appearance { . . . } 

geometry IndexedFaceSet { 

coord Coordinate { . . . } 

coordlndex [ . . . ] 

color Color { . . . } 

coiorindex [ . . . ] 

colorPerVertex TRUE 

} 

} 
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Controlling color on coordinate-based geometry 

Controlling color binding for face sets 

.The colorPerVertex field controls how color 
indexes are used (similar to line sets) 

• false: one color index to each face (ending 
at -1 coordinate indexes) 

• true: one color index to each coordinate 
index of each face (including -1 coordinate 
indexes) 
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Controlling color on coordinate-based geometry 

A sample IndexedFace Set node shape 



[ log.wrl ] 
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Controlling color on coordinate-based geometry 

Syntax: ElevationGrid 

• An ElevationGrid geometry node creates 
terrains 

• color - list of colors 

• colorPerVertex - control color binding 

• Always binds one color to each grid point 
or square, in order 

Shape { 

appearance Appearance { . . . } 

geometry ElevationGrid { 


} 


} 


height [ . . . ] 

color Color { . . . } 

colorPerVertex TRUE 
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Controlling color on coordinate-based geometry 

Controlling color binding for elevation grids 

.The colorPerVertex field controls how color 
indexes are used (similar to line and face sets) 

• false: one color to each grid square 

• true: one color to each height for each grid 
square 
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Controlling color on coordinate-based geometry 

A sample ElevationGrid node shape 



[ cmount.wri 1 
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Controlling color on coordinate-based geometry 

Summary 

.The color node lists colors to use for parts of a 
shape 

• Used as the value of the color field 

• Color indexes select colors to use 

• Colors override Material node 

.The colorPerVertex field selects color per 
line/face/grid square or color per coordinate 
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Controlling shading on coordinate-based geometry 

Motivation 

Example 

Controlling shading using the crease angle 

Selecting crease angles 

A sample using crease angles 

Using normals 

Syntax: Normal 

Syntax: IndexedFaceSet 

Controlling normal binding for face sets 

Syntax: ElevationGrid 

Controlling normal binding for elevation grids 

Syntax: Normallnterpolator 

Summary 
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Controlling shading on coordinate-based geometry 

Motivation 

• When shaded, the faces on a shape are 
obvious 

• To create a smooth shape you can use a large 
number of small faces 

• Requires lots of faces, disk space, memory, 
and drawing time 

• Instead, use smooth shading to create the 
illusion of a smooth shape, but with a small 
number of faces 
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Controlling shading on coordinate-based geometry 

Example 



[ cmount.wri ] 
a. No smooth shading 



[ cmount2.wri ] 
b. With smooth shading 




Controlling shading on coordinate-based geometry 

Controlling shading using the crease angle 

By default, faces are drawn with faceted 
shading 

You can enable smooth shading using the 

creaseAngle field for 


• IndexedFaceSet 

• ElevationGrid 

• Extrusion 
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Controlling shading on coordinate-based geometry 

Selecting crease angles 

• A crease angle is a threshold angle between 
two faces 


v 



• If face angle >= crease 
angle, use facet shading 

• If face angle < crease 
angle, use smooth shading 
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Controlling shading on coordinate-based geometry 

A sample using crease angles 



[ hcyll.wri ] 
a. crease angle = 0 


[ hcyl2.wri ] 

b. crease angle = 90 deg 


Smooth shading disabled Smooth shading enabled 
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Controlling shading on coordinate-based geometry 

Using normals 

• A normal vector indicates the direction a face 
is facing 

• If it faces a light, the face is shaded bright 

• By defualt, normals are automatically 
generated by the VRML browser 

• You can specify your own normals with a 
Normal node 


• Usually automatically generated normals 
are good enough 
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Controlling shading on coordinate-based geometry 

Syntax: Normal 

• A Normal node contains a list of normal vectors 
that override use of a crease angle 

Normal { 

vector [0.0 1.0 0.0, . . . ] 

} 

• Normals can be given for indexedFaceSet and 
ElevationGrid nodes 
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Controlling shading on coordinate-based geometry 

Syntax: IndexedFaceSet 

• An indexedFaceSet geometry node creates 
geometry out of faces 

• normal - list of normals 

• normaiindex - selects normals from list 

• normalPerVertex - control normal binding 

Shape { 

appearance Appearance { . . . } 

geometry IndexedFaceSet { 

coord Coordinate { . . . } 

coordlndex [ . . . ] 

normal Normal { . . . } 

normaiindex [ . . . ] 

normalPerVertex TRUE 

} 

} 
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Controlling shading on coordinate-based geometry 

Controlling normal binding for face sets 
.The normalPerVertex field controls how 

normal indexes are used 

• false: one normal index to each face 
(ending at -1 coordinate indexes) 

• true: one normal index to each coordinate 
index of each face (including -1 coordinate 
indexes) 
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Controlling shading on coordinate-based geometry 

Syntax: ElevationGrid 

• An ElevationGrid geometry node creates 
terrains 

• normal - list of normals 

• normalPerVertex - control normal binding 

• Always binds one normal to each grid point 
or square, in order 

Shape { 

appearance Appearance { . . . } 

geometry ElevationGrid { 
height [ . . . ] 

normal Normal { . . . } 

normalPerVertex TRUE 

} 

} 
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Controlling shading on coordinate-based geometry 

Controlling normal binding for elevation grids 
.The normalPerVertex field controls how 

normal indexes are used (similar to face sets) 

• false: one normal to each grid square 

• true: one normal to each height for each 
grid square 
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Controlling shading on coordinate-based geometry 

Syntax: Normallnterpolator 

• A Normaiinterpoiator node describes a normal 
set 

• keys - key fractions 

• values - key normal lists (X,Y,Z lists) 

• Interpolates lists of normals, similar to the 

Coordinatelnterpolator 

Normallnterpolator { 

key [0.0, . . . ] 

keyValue [0.01.01.0, . . . ] 

} 

• Typically route into a Normal node’s 

set_vector input 
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Controlling shading on coordinate-based geometry 

Summary 

• The creaseAngie field controls faceted or 
smooth shading 

.The Normal node lists normal vectors to use for 
parts of a shape 

• Used as the value of the normal field 

• Normal indexes select normals to use 

• Normals override creaseAngie value 

.The normalPerVertex field selects normal per 
face/grid square or normal per coordinate 

. The Normaiinterpoiator node converts times to 
normals 
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Summary examples 

A terrain 
Particle flow 
A real-time clock 
A timed timer 
A morphing snake 
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Summary examples 

A terrain 

• An ElevationGrid node creates a terrain 

• A color node provides terrain colors 



[ land.wrl ] 
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Summary examples 

Particle flow 

• Multiple Extrusion nodes trace particle paths 

• Multiple Positioninterpoiator nodes define 
particle animation paths 

• Multiple TimeSensor nodes clock the animation 
using different starting times 



[ espiralm.wri ] 
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Summary examples 

A real-time clock 

• A set of TimeSensor nodes watch the time 

• A Set of Orientationlnterpolator nodes Spin 

the clock hands 



[ stopwtch.wri ] 
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Summary examples 

A timed timer 

• A first TimeSensor node clocks a second 
TimeSensor node to create a periodic animation 



[ timetime.wri ] 
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Summary examples 

A morphing snake 


• A coordinateinterpoiator node animates the 
spine of an Extrusion node 



[ snake.wri ] 
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Mapping textures 


Motivation 

Example 

Example Textures 
Using image textures 
Using pixel textures 
Using movie textures 
Syntax: Appearance 
Syntax: ImageTexture 
Syntax: PixelTexture 
Syntax: MovieTexture 
Using materials with textures 
Colorizing textures 
Using transparent textures 
A sample transparent texture 
A sample transparent texture 
Summary 



Mapping textures 

Motivation 


You can model every tiny texture detail of a 
world using a vast number of colored faces 

• Takes a long time to write the VRML 

• Takes a long time to draw 

Use a trick instead 

• Take a picture of the real thing 

• Paste that picture on the shape, like 
sticking on a decal 

This technique is called Texture Mapping 
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Mapping textures 

Example 



[ can.wrl ] 
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Mapping textures 

Example Textures 
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Mapping textures 

Using image textures 
• Image texture 

• Uses a single image from a file in one of 
these formats: 

GIF • 8-bit lossless compressed images 

• 1 transparency color 

• Usually a poor choice for texture mapping 

JPEG • 8-bit thru 24-bit lossy compressed images 

• No transparency support 

• An adequate choice for texture mapping 

PNG • 8-bit thru 24-bit lossless compressed images 

• 8-bit transparency per pixel 

• Best choice 
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Mapping textures 

Using pixel textures 

• Pixel texture 

• A single image, given in the VRML file 
itself 

• The image is encoded using hex 

• Up to 10 bytes per pixel 

• Very inefficient 

• Only useful for very small textures 

• Stripes 

• Checkerboard patterns 
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Mapping textures 

Using movie textures 
• Movie texture 

• A movie from an MPEG-1 file 

• The movie plays back on the textured 
shape 

• Problematic in some browsers 
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Mapping textures 

Syntax: Appearance 

• An Appearance node describes overall shape 
appearance 

• texture - texture source 

Shape { 

appearance Appearance { 

material Material { . . . } 

texture ImageTexture { . . . } 

} 

geometry . . . 

} 
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Mapping textures 

Syntax: ImageTexture 

• An ImageTexture node selects a texture image 
for texture mapping 
• uri - texture image file URL 

Shape { 

appearance Appearance { 
material Material { } 
texture ImageTexture { 
url "wood.jpg" 

} 

} 

geometry . . . 

} 
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Mapping textures 

Syntax: PixelTexture 

• A PixelTexture node specifies texture image 
pixels for texture mapping 

• image - texture image pixels 

• Image data - width, height, bytes/pixel, 
pixel values 

Shape { 

appearance Appearance { 
material Material { } 
texture PixelTexture { 
image 213 

OxFFFFOO OxFFOOOO 

} 

} 

geometry . . . 


} 
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Mapping textures 

Syntax: MovieTexture 

• A MovieTexture node selects a texture movie 
for texture mapping 

• uri - texture movie file URL 

• When to play the movie, and how quickly 

(like a TimeSensor node) 

Shape { 

appearance Appearance { 
material Material { } 
texture MovieTexture { 
url "movie.mpg" 
loop TRUE 
speed 1.0 
startTime 0.0 
stopTime 0.0 

} 

} 

geometry . . . 


} 
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Mapping textures 

Using materials with textures 

• Color textures override the color in a Material 
node 

• Grayscale textures multiply with the Material 
node color 

• Good for colorizing grayscale textures 

• If there is no Material node, the texture is 
applied emissively 
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Mapping textures 

Colorizing textures 



a. Grayscale wood 
texture 



b. Six wood colors from 
one colorized texture 
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Mapping textures 

Using transparent textures 

• Texture images can include color and 
transparency values for each pixel 

• Pixel transparency is also known as alpha 

• Pixel transparency enables you to make parts 
of a shape transparent 

• Windows, grillwork, holes 

• Trees, clouds 
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Mapping textures 

A sample transparent texture 




a. Color portion of tree 
texture 


b. Transparency portion 
of tree texture 
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Mapping textures 

A sample transparent texture 



[ treewall.wri ] 
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Mapping textures 

Summary 

• A texture is like a decal pasted to a shape 

• Specify the texture using an ImageTexture, 
PixelTexture, Or MovieTexture node in an 
Appearance node 

• Color textures override material, grayscale 
textures multiply 

• Textures with transparency create holes 
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285 

Controlling how textures are mapped 

Motivation 

Working through the texturing process 
Using texture coordinate system 
Specifying texture coordinates 
Applying texture transforms 
Texturing a face 

Working through the texturing process 
Syntax: TextureCoordinate 
Syntax: IndexedFaceSet 
Syntax: ElevationGrid 
Syntax: Appearance 
Syntax: TextureTransform 
A sample using no transform 
A sample using translation 
A sample using rotation 
A sample using scale 
A sample using texture coordinates 
A sample using scale 
Scaling, rotating, and translating 
Scaling, rotating, and translating 



A sample using scale and rotation 
Summary 



Controlling how textures are mapped 

Motivation 


By default, an entire texture image is mapped 
once around the shape 

You can also: 

• Extract only pieces of interest 

• Create repeating patterns 



Controlling how textures are mapped 

Working through the texturing process 

Imagine the texture image is a big piece of 
rubbery cookie dough 

Select a texture image piece 

• Define the shape of a cookie cutter 

• Position and orient the cookie cutter 

• Stamp out a piece of texture dough 

Stretch the rubbery texture cookie to fit a face 
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Controlling how textures are mapped 

Using texture coordinate system 

• Texture images (the dough) are in a texture 
coordinate system 

• S direction is 
horizontal 

• T direction is vertici 

• (0,0) at lower-left 

• (1,1) at upper-right 
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Controlling how textures are mapped 

Specifying texture coordinates 

• Texture coordinates and texture coordinate 
indexes specify a texture piece shape (the 
cookie cutter) 



0.0 0 . 0 , 
1.0 0 . 0 , 
1.0 1 . 0 , 
0.0 1.0 
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Controlling how textures are mapped 

Applying texture transforms 

• Texture transforms translate, rotate, and scale 
the texture coordinates (placing the cookie 
cutter) 








291 


Controlling how textures are mapped 

Texturing a face 

• Bind the texture to a face (stretch the cookie 
and stick it) 
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Controlling how textures are mapped 

Working through the texturing process 

• Select piece with texture coordinates and 
indexes 

• Create a cookie cutter 

• Transform the texture coordinates 

• Position and orient the cookie cutter 

• Bind the texture to a face 

• Stamp out the texture and stick it on a face 

• The process is very similar to creating faces! 
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Controlling how textures are mapped 

Syntax: TextureCoordinate 

• A TextureCoordinate node contains a list of 
texture coordinates 

TextureCoordinate { 

point [ 0.2 0.2, 0.8 0.2, . . . ] 

} 

• Used as the texcoord field value of 

IndexedFaceSet Or ElevationGrid nodes 
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Controlling how textures are mapped 

Syntax: IndexedFaceSet 

• An IndexedF aceSet geometry node creates 
geometry out of faces 

• texCoord and texCoordlndex - Specify texture 

pieces 

Shape { 

appearance Appearance { . . . } 

geometry IndexedFaceSet { 

coord Coordinate { . . . } 

coordlndex [ . . . ] 

texCoord TextureCoordinate { . . . } 

texCoordlndex [ . . . ] 

} 

} 
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Controlling how textures are mapped 

Syntax: ElevationGrid 

• An ElevationGrid geometry node creates 
terrains 

• texcoord - specify texture pieces 

• Automatically generated texture coordinate 
indexes 

Shape { 

appearance Appearance { . . . } 

geometry ElevationGrid { 
height [ . . . ] 

texCoord TextureCoordinate { . . . } 

} 

} 
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Controlling how textures are mapped 

Syntax: Appearance 

• An Appearance node describes overall shape 
appearance 

• textureTransform - transform 


Shape { 

appearance Appearance { 

material Material { . . . } 

texture ImageTexture { . . . } 

textureTransform TextureTransform { . . . } 

} 

geometry . . . 

> 
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Controlling how textures are mapped 

Syntax: TextureTransform 

• A TextureTransform node transforms texture 
coordinates 

• translation - position 

• rotation - orientation 

• scale - size 


Shape { 

appearance Appearance { 

material Material { . . . } 

texture ImageTexture { . . . } 

textureTransform TextureTransform { 
translation 0.0 0.0 
rotation 0.0 
scale 1.0 1.0 

} 


} 


} 
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Controlling how textures are mapped 

A sample using no transform 




a. Texture in texture b. Texture on shape 
space 
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Controlling how textures are mapped 

A sample using translation 




a. Texture in texture 
space 


b. Translated cookie 
cutter 



c. Texture on shape 
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Controlling how textures are mapped 

A sample using rotation 



a. Texture in texture b. Rotated cookie cutter 
space 



c. Texture on shape 
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Controlling how textures are mapped 

A sample using scale 



a. Texture in texture b. Scaled cookie cutter 
space 



c. Texture on shape 
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Controlling how textures are mapped 

A sample using texture coordinates 



a. Texture image [ cookie.wri 1 

b. Texture on shapes 
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Controlling how textures are mapped 

A sample using scale 



a. Texture image 



[ brickb.wri ] 
b. Texture on shape 
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Controlling how textures are mapped 

Scaling, rotating, and translating 


• Scale, Rotate, and Translate a texture cookie 
cutter one after the other 

Shape { 

appearance Appearance { 

material Material { . . . } 

texture ImageTexture { . . . } 

textureTransform TextureTransform { 
translation 0.0 0.0 
rotation .785 
scale 8.5 8.5 

} 


} 


} 
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Controlling how textures are mapped 

Scaling, rotating, and translating 

• Read texture transform operations top-down : 

• The cookie cutter is translated, rotated, 
then scaled 

• Order is fixed, independent of field order 

• This is the reverse of a Transform node 

• This is a significant difference between VRML 
2.0 and ISO VRML 97 

• VRM L 2.0 uses scale, rotate, translate 
order 

• ISO VRML 97 uses translate, rotate, scale 
order 
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Controlling how textures are mapped 

A sample using scale and rotation 



a. Texture image 



[ fence.wri ] 


b. Texture on shape 
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Controlling how textures are mapped 

Summary 

• Texture images are in a texture coordinate 
system 

• Texture coordinates and indexes describe a 
texture cookie cutter 

• Texture transforms translate, rotate, and 
scale place the cookie cutter 

• Texture indexes bind the cut-out cookie 
texture to a face on a shape 
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Lighting your world 

Motivation 

Example 

Using types of lights 

Using common lighting features 

Using common lighting features 

Syntax: PointLight 

Syntax: DirectionalLight 

Syntax: SpotLight 

Syntax: SpotLight 

Example 

Summary 
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Lighting your world 

Motivation 

• By default, you have one light in the scene, 
attached to your head 

• For more realism, you can add multiple lights 

• Suns, light bulbs, candles 

• Flashlights, spotlights, firelight 

• Lights can be positioned, oriented, and 
colored 


• Lights do not cast shadows 
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Lighting your world 

Example 
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Lighting your world 

Using types of lights 

• Theer are three types of VRML lights 

• Point lights - radiate in all directions from a 
point 

• Directional lights - aim in one direction 
from infinitely far away 

• Spot lights - aim in one direction from a 
point, radiating in a cone 
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Lighting your world 

Using common lighting features 

• All lights have several common fields: 

• on - turn it on or off 

• intensity - control brightness 

• ambientintensity - control ambient effect 

• color - select color 
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Lighting your world 

Using common lighting features 

• Point lights and spot lights also have: 

• location - position 

• radius - maximum lighting distance 

• attenuation - drop off with distance 

• Directional lights and spot lights also have 

• direction - aim direction 



Lighting your world 

Syntax: PointLight 

A PointLight node illuminates radially from a 
point 


4 # • • fc k 
I / « » k I 
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PointLight { 

location 0.0 0.0 0.0 
intensity 1.0 
color 1.0 1.0 1.0 

} 


[ pntlite.wri ] 
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Lighting your world 

Syntax: DirectionalLight 

• A DirectionalLight node illuminates in one 
direction from infinitely far away 

DirectionalLight { 

direction 1.0 0.0 0.0 
intensity 1.0 
color 1.0 1.0 1.0 

■BKEElM } 

[ dirlite.wri ] 
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Lighting your world 

Syntax: SpotLight 

• A SpotLight node illuminates from a point, in 
one direction, within a cone 



[ sptlite.wri ] 


SpotLight { 

location 0.0 0.0 0.0 
direction 1.0 0.0 0.0 
intensity 1.0 
color 1.0 1.0 1.0 
cutOffAngle 0.785 

} 
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Lighting your world 

Syntax: SpotLight 

• The maximum width of a spot light’s cone is 
controlled by the cutof fAngie field 

• An inner cone region with constant brightness 
is controlled by the beamWidth field 

SpotLight { 

• • • 

cutOffAngie 0.785 
beamWidth 0.52 

} 



319 


Lighting your world 

Example 



[ temple.wri ] 



320 


Lighting your world 

Summary 

• There are three types of lights: point, 
directional, and spot 

• All lights have an on/off, intensity, ambient 
effect, and color 

• Point and spot lights have a location, radius, 
and attenuation 


• Directional and spot lights have a direction 
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Adding backgrounds 

Motivation 

Using the background components 
Using the background components 
Syntax: Background 
Using sky angles and colors 
Using ground angles and colors 
A sample background 
A sample background 
Syntax: Background 
A sample background image 
A sample background 
A sample background 
Summary 
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Adding backgrounds 

Motivation 

• Shapes form the foreground of your scene 

• You can add a background to provide context 

• Backgrounds describe: 

• Sky and ground colors 

• Panorama images of mountains, cities, etc 

• Backgrounds are faster to draw than if you 
used shapes to build them 
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Adding backgrounds 

Using the background components 

• A background creates three special shapes: 

• A sky sphere 

• A ground hemisphere inside the sky sphere 

• A panorama box inside the ground 
hemisphere 

• The sky sphere and ground hemisphere are 
shaded with a color gradient 

• The panorama box is texture mapped with six 
images 
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Adding backgrounds 

Using the background components 

• Transparent parts of the ground hemisphere 
reveal the sky sphere 

• Transparent parts of the panorama box reveal 
the ground and sky 

• The viewer can look up, down, and 
side-to-side to see different parts of the 
background 

• The viewer can never get closer to the 
background 



325 


Adding backgrounds 

Syntax: Background 

• A Background node describes background 
colors 

• skyCoior and skyAngie - sky gradation 

• groundcolor and groundAngle - ground 

gradation 

Background { 

skyCoior [0.1 0.1 0.0, . . . ] 

skyAngie [ 1.309, 1.571 ] 

groundcolor [0.00.20.7, . . . ] 

groundAngle [ 1.309, 1.571 ] 

} 
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Adding backgrounds 

Using sky angles and colors 

• The first sky color is at the north pole 

• The remaining sky colors are at given sky 
angles 

• The maximum angle is 180 degrees = 
3.1415 radians 


• The last color smears on down to the south 
pole 



Adding backgrounds 

Using ground angles and colors 

The first ground color is at the south pole 

The remaining ground colors are at given 
ground angles 

• The maximum angle is 90 degrees = 1.5708 
radians 

After the last color, the rest of the hemisphere 
is transparent 
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Adding backgrounds 

A sample background 


Background { 

skyColor [ 

0.0 0.2 0.7, 

0.0 0.5 1.0, 

1.0 1.0 1.0 

] 

skyAngle [ 1.309, 1.571 ] 
groundColor [ 

0.1 0.10 0 . 0 , 

0.4 0.25 0.2, 

0.6 0.60 0.6, 

] 

groundAngle [ 1.309, 1.571 ] 



329 


Adding backgrounds 

A sample background 



[ back.wrl ] 
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Adding backgrounds 

Syntax: Background 

• A Background node describes background 
images 

• f ronturi, etc - texture image URLs for box 

Background { 

• • • 

frontUrl "mountns.png" 
backUrl "mountns.png" 
leftUrl "mountns.png" 
rightUrl "mountns.png" 
topUrl "clouds.png" 
bottomUrl "ground.png" 


} 
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Adding backgrounds 

A sample background image 



a. Color portion of b. Transparency portion 
mountains texture of mountains texture 
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Adding backgrounds 

A sample background 


Background { 

skyColor [ 

0.0 0.2 0.7, 

0.0 0.5 1.0, 

1.0 1.0 1.0 

] 

skyAngle [ 1.309, 1.571 ] 
groundColor [ 

0.1 0.10 0 . 0 , 

0.4 0.25 0.2, 

0.6 0.60 0.6, 

] 

groundAngle [ 1.309, 1.571 ] 
frontUrl "mountns.png" 
backUrl "mountns.png" 
leftUrl "mountns.png" 
rightUrl "mountns.png" 

# no top or bottom images 
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Adding backgrounds 

A sample background 



[ back2.wri ] 
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Adding backgrounds 

Summary 

• Backgrounds describe: 

• Ground and sky color gradients on ground 
hemisphere and sky sphere 

• Panorama images on a panorama box 

• The viewer can look around, but never get 
closer to the background 
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Adding fog 

Motivation 

Examples 

Using fog visibility controls 
Selecting a fog color 
Syntax: Fog 
Several fog samples 
Summary 



Adding fog 

Motivation 


Fog increases realism: 

• Add fog outside to create hazy worlds 

• Add fog inside to create dark dungeons 

• Use fog to set a mood 

The further the viewer can see, the more you 
have to model and draw 

To reduce development time and drawing 
time, limit the viewer’s sight by using fog 
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[ fog2.wri ] 


Adding fog 

Examples 



[ fog4.wri ] 
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Adding fog 

Using fog visibility controls 

• The fog type selects linear or exponential 
visibility reduction with distance 

• Linear is easier to control 

• Exponential is more realistic and "thicker" 

• The visibility range selects the distance where 
the fog reaches maximum thickness 

• Fog is "clear" at the viewer, and gradually 
reduces visibility 
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Adding fog 

Selecting a fog color 

• Fog has a fog color 

• White is typical, but black, red, etc. also 
possible 

• Shapes are faded to the fog color with distance 

• The background is unaffected 

• For the best effect, make the background 
the fog color 
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Adding fog 

Syntax: Fog 

• A Fog node creates colored fog 

• color - fog Color 

• fogType - LINEAR Or EXPONENTIAL 

• visibiiityRange - maximum visibility limit 

Fog { 

color 1.0 1.0 1.0 
fogType "LINEAR" 
visibiiityRange 10.0 

} 
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Adding fog 

Several fog samples 



[ fogl.wrl ] 
a. No fog 


[ fog3.wri ] 
c. Exponential fog, 
visibility range 30.0 



[ fog2.wri ] 

b. Linear fog, visibility 
range 30.0 



[ fog5.wri ] 
c. Linear fog with a 
background 
(don’t do this!) 
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Adding fog 

Summary 

• Fog has a color, a type, and a visibility range 

• Fog can be used to set a mood, even indoors 

• Fog limits the viewer’s sight: 

• Reduces the amount of the world you have 
to build 

• Reduces the amount of the world that must 
be drawn 
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Adding sound 

Motivation 

Creating sounds 

Syntax: AudioClip 

Syntax: MovieTexture 

Selecting sound source types 

Syntax: Sound 

Syntax: Sound 

Syntax: Sound 

Setting the sound range 

Creating triggered sounds 

A sample using triggered sound 

A sample using triggered sound 

Creating continuous localized sounds 

A sample using continuous localized sound 

A sample using continuous localized sound 

Creating continuous background sounds 

Summary 
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Adding sound 

Motivation 

• Sounds can be triggered by viewer actions 

• Clicks, horn honks, door latch noises 

• Sounds can be continuous in the background 

• Wind, crowd noises, elevator music 

• Sounds emit from a location, in a direction, 
within an area 



Adding sound 

Creating sounds 

Sounds have two components 

• A sound source providing a sound signal 

• Like a stereo component 

• A sound emitter converts a signal to virtual 
sound 

• Like a stereo speaker 
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Adding sound 

Syntax: AudioClip 

• An Audiociip node creates a digital sound 
source 

• url - a sound file URL 

• pitch - playback speed 

• playback controls, like a TimeSensor node 

Sound { 

source AudioClip { 

url "myfile.wav" 
pitch 1.0 
startTime 0.0 
stopTime 0.0 
loop FALSE 

} 

} 
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Adding sound 

Syntax: MovieTexture 

• A MovieTexture node creates a movie sound 
source 

• uri - a texture move file URL 

• speed - playback speed 

• playback controls, like a TimeSensor node 

Sound { 

source MovieTexture { 
url "movie.mpg" 
speed 1.0 
startTime 0.0 
stopTime 0.0 
loop FALSE 

} 

} 
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Adding sound 

Selecting sound source types 

• Supported by the Audiociip node: 

• WA V - digital sound files 

• Good for sound effects 

• MIDI - General MIDI musical 
performance files 

• MIDI files are good for background 
music 

• Supported by the MovieTexture node: 

• MPEG - movie file with sound 

• Good for virtual TVs 
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Adding sound 

Syntax: Sound 

• A sound node describes a sound emitter 

• source - AudioClip Or MovieTexture node 

• location and direction - emitter placement 

Sound { 

source AudioClip { . . . } 

location 0.0 0.0 0.0 
direction 0.0 0.0 1.0 

} 



350 


Adding sound 

Syntax: Sound 

• A sound node describes a sound emitter 

• intensity - Volume 

• spatiaiize - use spatialize processing 

• priority - prioritize the sound 

Sound { 

• • • 

intensity 1.0 
spatialize TRUE 
priority 0.0 

} 
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Adding sound 

Syntax: Sound 

• A sound node describes a sound emitter 

• minFront, minBack - inner ellipsoid 

• maxFront, maxBack - Outer ellipsoid 

Sound { 

• • • 

minFront 1.0 
minBack 1.0 
maxFront 10.0 
maxBack 10.0 
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Adding sound 

Setting the sound range 

• The sound range fields specify two ellipsoids 

• minFront and minBack control an inner 
ellipsoid 

• maxFront and maxBack control an outer 
ellipsoid 

• Sound has a constant volume inside the inner 
ellipsoid 

• Sound drops to zero volume from the inner to 
the outer ellipsoid 
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Adding sound 

Creating triggered sounds 


• Audiociip node: 

• loop FALSE 

• Set startTime from a sensor node 


• sound node: 

• spatialize TRUE 

• minFront etc. with small values 

• priority 1.0 
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Adding sound 

A sample using triggered sound 

Group { 

children [ 

Shape { 

appearance Appearance { 

material Material { diffuseColor 1.0 1.0 1.0 

} 

geometry Box { size 0.23 0.1 1.5 } 

} 

DEF C4 TouchSensor { } 

Sound { 

source DEF PitchC4 AudioClip { 
url "tonel.wav" 
pitch 1.0 

} 

maxFront 100.0 
maxBack 100.0 

} 

] 

} 

ROUTE C4.touchTime TO PitchC4.set startTime 
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Adding sound 

A sample using triggered sound 


Mb 


[ kbd.wrl ] 
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Adding sound 

Creating continuous localized sounds 


• Audiociip node: 

• loop TRUE 

• startTime 0.0 (default) 

• stopTime 0.0 (default) 


• sound node: 

• spatialize TRUE (default) 

• minFront etc. with medium values 

• priority 0.0 (default) 
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Adding sound 

A sample using continuous localized sound 

Sound { 

source AudioClip { 

url "willowl.wav" 
loop TRUE 
startTime 1.0 
stopTime 0.0 

} 

minFront 5.0 
minBack 5.0 
maxFront 10.0 
maxBack 10.0 

} 

Transform { 

translation 0.0 -1.65 0.0 
children [ 

Inline { url "sndmark.wri" } 

] 

} 
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Adding sound 

A sample using continuous localized sound 



[ ambient.wri ] 
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Adding sound 

Creating continuous background sounds 


• Audiociip node: 

• loop TRUE 

• startTime 0.0 (default) 

• stopTime 0.0 (default) 


• sound node: 

• spatialize FALSE (default) 

• minFront etc. with large values 

• priority 0.0 (default) 
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Adding sound 

Summary 


• An Audiociip node or a MovieTexture node 

describe a sound source 

• A URL gives the sound file 

• Looping, start time, and stop time control 
playback 

• A sound node describes a sound emitter 

• A source node provides the sound 

• Range fields describe the sound volume 
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Controlling the viewpoint 

Motivation 

Creating viewpoints 

Syntax: Viewpoint 

A sample using multiple viewpoints 

Summary 
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Controlling the viewpoint 

Motivation 

• By default, the viewer enters a world at (0.0, 

0 . 0 , 10 . 0 ) 

• You can provide your own preferred view 
points 

• Select the entry point position 

• Select favorite views for the viewer 

• Name the views for a browser menu 
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Controlling the viewpoint 

Creating viewpoints 

• Viewpoints specify a desired location, an 
orientation, and a camera field of view lens 
angle 

• Viewpoints can be transformed using a 

Transform node 


• The first viewpoint found in a file is the entry 
point 
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Controlling the viewpoint 

Syntax: Viewpoint 

• A Viewpoint node specifies a named viewing 
location 

• position and orientation - viewing location 

• fieidofview - camera lens angle 

• description - description for viewpoint 
menu 


Viewpoint { 

position 0.0 0.0 10.0 
orientation 0.0 0.0 1.0 0.0 
fieldOfView 0.785 
description "Entry View" 


} 
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Controlling the viewpoint 

A sample using multiple viewpoints 



[ windmill.wri ] 





Controlling the viewpoint 

Summary 

Specify favorite viewpoints in viewpoint nodes 

The first viewpoint in the file is the entry 
viewpoint 
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Controlling navigation 

Motivation 

Selecting navigation types 
Specifying avatars 
Controlling the headlight 
Syntax: Navigationlnfo 
Summary 



Controlling navigation 

Motivation 


Different types of worlds require different 
styles of navigation 

• Walk through a dungeon 

• Fly through a cloud world 

• Examine shapes in a CAD application 

You can select the navigation type 

You can describe the size and speed of the 
viewer’s avatar 
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Controlling navigation 

Selecting navigation types 

• There are five standard navigation keywords: 

• walk - walk, pulled down by gravity 

• fly - fly, unaffected by gravity 

• examine - examine an object at "arms 
length" 

• none - no navigation, movement controlled 
by world not viewer! 

• any - allows user to change navigation type 

• Some browsers support additional navigation 
types 
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Controlling navigation 

Specifying avatars 



• Avatar size (width, height, step height) and 
speed can be specified 









Controlling navigation 

Controlling the headlight 

By default, a headlight is placed on the 
avatar’s head and aimed in the head direction 

You can turn this headlight on and off 

• Most browsers provide a menu option to 
control the headlight 

• You can also control the headlight with the 

Navigationlnfo node 



372 


Controlling navigation 

Syntax: Navigationlnfo 

• A Navigationlnfo node selects the navigation 
type and avatar characteristics 

• type - navigation style 

• avatarSize and speed - avatar 

characteristics 

• headlight - headlight on or off 

Navigationlnfo { 

type [ "WALK", "ANY" ] 

avatarSize [ 0.25, 1.6, 0.75 ] 

speed 1 . 0 

headlight TRUE 
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Controlling navigation 

Summary 

• The navigation type specifies how a viewer 
can move in a world 

• walk, fly, examine, or none 

• The avatar overall size and speed specify the 
viewer’s avatar characteristics 
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Sensing the viewer 

Motivation 
Sensing the viewer 

Using visibility and proximity sensors 
Syntax: VisibilitySensor 
Syntax: Proximity Sensor 
Syntax: Proximity Sensor 
Detecting viewer-shape collision 
Creating collision groups 
Syntax: Collision 

A sample use of proximity sensors and collision groups 

Optimizing collision detection 

Using multiple sensors 

Summary 

Summary 

Summary 
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Sensing the viewer 

Motivation 

• Sensing the viewer enables you to trigger 
animations 

• when a region is visible to the viewer 

• when the viewer is within a region 

• when the viewer collides with a shape 

• The lod and Billboard nodes are 
special-purpose viewer sensors with built-in 
responses 
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Sensing the viewer 

Sensing the viewer 

• There are three types of viewer sensors: 

• A visibiiitySensor node senses if the 
viewer can see a region 

• A ProximitySensor node senses if the viewer 
is within a region 

• A collision node senses if the viewer has 
collided with shapes 
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Sensing the viewer 

Using visibility and proximity sensors 


• VisibilitySensor <111(1 ProximitySensor nodes 

sense a box-shaped region 

• center - region center 

• size - region dimensions 

• Both nodes have similar outputs: 

• enterTime - sends time on visible or region 
entry 

• exitTime - sends time on not visible or 
region exit 

• isActive - sends true on entry, false on exit 
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Sensing the viewer 

Syntax: VisibilitySensor 

• A visibilitysensor node senses if the viewer 

sees or stops seeing a region 

• center and size - the region’s location and 
size 

• enterTime and exitTime - sends time on 
entry/exit 

• isActive - sends true/false on entry/exit 

DEF VisSense VisibilitySensor { 
center 0.0 0.0 0.0 
size 14.0 14.0 14.0 

} 

ROUTE VisSense.enterTime TO Clock.set startTime 
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Sensing the viewer 

Syntax: Proximity Sensor 

• A ProximitySensor node senses if the viewer 
enters or leaves a region 

• center and size - the region’s location and 
size 

• enterTime and exitTime - sends time on 
entry/exit 

• isActive - sends true/false on entry/exit 

DEF ProxSense ProximitySensor { 
center 0.0 0.0 0.0 
size 14.0 14.0 14.0 

} 

ROUTE ProxSense.enterTime TO Clock.set startTime 
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Sensing the viewer 

Syntax: Proximity Sensor 

• A Proximitysensor node senses the viewer 
while in a region 

• position and orientation - sends position 

and orientation while viewer is in the 
region 

DEF ProxSense ProximitySensor { . . . } 

ROUTE ProxSense.position_changed TO PetRobotFollower.set 
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Sensing the viewer 

Detecting viewer-shape collision 

• A collision grouping node senses shapes 
within the group 

• Detects if the viewer collides with any 
shape in the group 

• Automatically stops the viewer from going 
through the shape 

• Collision occurs when the viewer’s avatar gets 
close to a shape 

• Collision distance is controlled by the 
avatar size in the Navigatiomnfo node 
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Sensing the viewer 

Creating collision groups 

• Collision checking is expensive so, check for 
collision with a proxy shape instead 

• Proxy shapes are typically extremely 
simplified versions of the actual shapes 

• Proxy shapes are never drawn 

• A collision group with a proxy shape, but no 
children, creates an invisible collidable shape 

• Windows and invisible railings 

• Invisible world limits 
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Sensing the viewer 

Syntax: Collision 

• A collision grouping node senses if the 
viewer collides with group shapes 

• collide - enable/disable sensor 

• proxy - simple shape to sense instead of 
children 

• children - children to sense 

• coiiideTime - sends time on collision 

DEF Collide Collision { 
collide TRUE 

proxy Shape { geometry Box {...}} 
children [ . . . ] 

} 

ROUTE Collide.coiiideTime TO OuchSound.set startTime 
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Sensing the viewer 

A sample use of proximity sensors and collision 

groups 



[ prox2.wri ] 
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Sensing the viewer 

Optimizing collision detection 

• Collision is on by default 

• Turn it off whenever possible! 

• However, once a parent turns off collision, a 
child can’t turn it back on! 

• Collision results from viewer colliding with a 
shape, but not from a shape colliding with a 
viewer 
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Sensing the viewer 

Using multiple sensors 

• Any number of sensors can sense at the same 
time 

• You can have multiple visibility, proximity, 
and collision sensors 

• Sensor areas can overlap 

• If multiple sensors should trigger, they do 
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Sensing the viewer 

Summary 

• A visibilitysensor node checks if a region is 
visible to the viewer 

• The region is described by a center and a 
size 

• Time is sent on entry and exit of visibility 

• True/false is sent on entry and exit of 
visibility 
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Sensing the viewer 

Summary 

• A ProximitySensor node checks if the viewer is 
within a region 

• The region is described by a center and a 
size 

• Time is sent on viewer entry and exit 

• True/false is sent on viewer entry and exit 

• Position and orientation of the viewer is 
sent while within the sensed region 
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Sensing the viewer 

Summary 

• A collision grouping node checks if the 
viewer has run into a shape 

• The shapes are defined by the group’s 
children or a proxy 

• Collision time is sent on contact 
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Summary examples 


A doorway 
A mysterious temple 
Depth-cueing using fog 
A heads-up display 
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Summary examples 

A doorway 

• A set of imageTexture nodes add marble 
textures 

• Lighting nodes create dramatic lighting 

• A Fog node fades distant shapes 

• A ProximitySensor node controls animation 



[ doorway.wrl ] 
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Summary examples 

A mysterious temple 

• A Background node creates a sky gradient 

• A sound node creates a spatialized sound effect 

• A set of viewpoint nodes provide standard 
views 



[ temple.wri ] 
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Summary examples 

Depth-cueing using fog 

• Multiple IndexedLineSet nodes create 
wireframe isosurfaces 

• A Fog node with black fog fades out distant 
lines for depth-cueing 







[ isoline.wri ] 
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Summary examples 

A heads-up display 

• A ProximitySensor node tracks the viewer and 
moves a panel at each step 

• The panel contains shapes and sensors to 
control the content 



[ hud.wrl ] 
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Controlling detail 

Motivation 

Example 

Creating multiple shape versions 
Controlling level of detail 
Syntax: LOD 
Choosing detail ranges 
Optimizing a shape 
A sample of detail levels 
A sample LOD 
A sample LOD 
Summary 



Controlling detail 

Motivation 


The further the viewer can see, the more there 
is to draw 

If a shape is distant: 

• The shape is smaller 

• The viewer can’t see as much detail 

• So... draw it with less detail 

Varying detail with distance reduces upfront 
download time, and increases drawing speed 
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Controlling detail 

Example 



[ proxl.wri ] 
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Controlling detail 

Creating multiple shape versions 

• To control detail, model the same shape 
several times 

• high detail for when the viewer is close up 

• medium detail for when the viewer is 
nearish 

• low detail for when the viewer is distant 

• Usually, two or three different versions is 
enough, but you can have as many as you 
want 
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Controlling detail 

Controlling level of detail 

• Group the shape versions as levels in an lod 
grouping node 

• LOD is short for Level of Detail 

• List them from highest to lowest detail 
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Controlling detail 

Syntax: LOD 

• An lod grouping node creates a group of 
shapes describing different levels (versions) of 
the same shape 

• center - the center of the shape 

• range - a list of level switch ranges 

• level - a list of shape levels 

LOD { 

center 0.0 0.0 0.0 
range [ . . . ] 
level [ . . . ] 

} 
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Controlling detail 

Choosing detail ranges 

• Use a list of ranges for level switch points 

• If you have 3 levels, you need 2 ranges 

• Ranges are hints to the browser 

range [ 5.0, 10.0 ] 


shape _ 

center 

Viewer <= 5.0 
Show 1st level 


5.0 


10.0 


I Viewer <=10.0 I Viewer >10.0 
I Show 2nd level I Show 3rd level 
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Controlling detail 

Optimizing a shape 

• Suggested procedure to make different levels 
(versions): 

• Make the high detail shape first 

• Copy it to make a medium detail level 

• Move the medium detail shape to a desired 
switch distance 

• Delete parts that aren’t dominant 

• Repeat for a low detail level 

• Lower detail levels should use simpler 
geometry, fewer textures, and no text 
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Controlling detail 

A sample of detail levels 



[ torches3.wri ] 
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Controlling detail 

A sample LOD 


LOD { 

center 0.0 0.0 0.0 


range [ 7.0, 10.0 ] 
level [ 

Inline { url "torchl.wri" 
Inline { url "torch2.wri” 
Inline { url "torch3.wri" 

] 

} 


} 

} 

} 
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Controlling detail 

A sample LOD 



[ torches.wri ] 
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Controlling detail 

Summary 

• Increase performance by making multiple 
levels of shapes 

• High detail for close up viewing 

• Lower detail for more distant viewing 

• Group the levels in an lod node 

• Ordered from high detail to low detail 

• Ranges to select switching distances 
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Introducing script use 

Motivation 
Syntax: Script 

Defining the program script interface 
Data types 
Data types 

A sample using a program script 
A sample using a program script 
Summary 



Introducing script use 

Motivation 


Many actions are too complex for animation 
nodes 

• Computed animation paths (eg. gravity) 

• Algorithmic shapes (eg. fractals) 

• Collaborative environments (eg. games) 

You can create new sensors, interpolators, 
etc., using program scripts written in 

• Java - powerful general-purpose language 

• JavaScript - easy-to-learn language 

• VRMLscript - same as JavaScript 
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Introducing script use 

Syntax: Script 

• A script node selects a program script to run: 
• url - choice of program script 

DEF Bouncer Script { 

url "bouncer.class" 

or. . . 

url "bouncer.js" 

or. . . 

url "javascript: ..." 

or. . . 

url "vrmlscript: ..." 

} 
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Introducing script use 

Defining the program script interface 

• A script node also declares the program 
script interface 

• field, eventln, and eventOut - inputs and 

outputs 

• Each has a name and data type 

• Fields have an initial value 

DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 
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Introducing script use 

Data types 

Data type Meaning 


SFBool 

SFColor, MFColor 

SFFloat, MFFloat 
SFImage 

SFInt32, MFInt32 
SFNode, MFNode 


Boolean, true or false value 
RGB color value 
Floating point value 
Image value 
Integer value 
Node value 
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Introducing script use 

Data types 

Data type Meaning 


SFRotation, MFRotation 

SFString, MFString 
SFTime 

SFVec2f, MFVec2f 
SFVec3f, MFVec3f 


Rotation value 
Text string value 
Time value 

XY floating point value 
XYZ floating point value 
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Introducing script use 

A sample using a program script 

DEF Clock TimeSensor { . . . } 

DEF Ball Transform { . . . } 

DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 
url "vrmlscript: . . ." 

} 

ROUTE Clock.fraction_changed TO Bouncer.set_fraction 

ROUTE Bouncer.value_changed TO Ball.set_translation 
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Introducing script use 

A sample using a program script 



[ bouncel.wri ] 
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Introducing script use 

Summary 

• The script node selects a program script, 
specified by a URL 

• Program scripts have field and event interface 
declarations, each with 

• A data type 

• A name 

• An initial value (fields only) 
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Writing program scripts with JavaScript 

Motivation 

Declaring a program script interface 
Initializing a program script 
Shutting down a program script 
Responding to events 
Processing events in JavaScript 
Accessing fields from JavaScript 
Accessing eventOuts from JavaScript 
A sample JavaScript script 
A sample JavaScript script 
A sample JavaScript script 
A sample JavaScript script 
A sample JavaScript script 
A sample JavaScript script 
A sample JavaScript script 
A sample JavaScript script 
A sample JavaScript script 
A sample JavaScript script 
Building user interfaces 
Building a toggle switch 



Using a toggle switch 
Using a toggle switch 
Building a color selector 
Using a color selector 
Using a color selector 
Summary 



Writing program scripts with JavaScript 

Motivation 


A program script implements the script node 
using values from the interface 

• The script responds to inputs and sends 
outputs 

A program script can be written in Java , 
JavaScript , VRMLscript, and other languages 

• JavaScript is easier to program 

• Java is more powerful 

• VRMLscript is essentially JavaScript 
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Writing program scripts with JavaScript 

Declaring a program script interface 


• For a JavaScript program script, typically 
give the script in the script node’s uri field 

DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 
url "javascript: ..." 
or. . . 

url "vrmlscript: . . ." 

} 
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Writing program scripts with JavaScript 

Initializing a program script 

• The optional initialize function is called 
when the script is loaded 

function initialize ( ) { 

} 

• Initialization occurs when: 

• the script node is created (typically when 
the browser loads the world) 



Writing program scripts with JavaScript 

Shutting down a program script 

The optional shutdown function is called when 
the script is unloaded 

function shutdown ( ) { 

} 

Shutdown occurs when: 

• the script node is deleted 

• the browser loads a new world 
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Writing program scripts with JavaScript 

Responding to events 

• An eventln function must be declared for each 
eventln 

• The eventln function is called each time an 
event is received, passing the event’s 

• value 

• time stamp 

function set_fraction( value, timestamp ) { 

} 
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Writing program scripts with JavaScript 

Processing events in JavaScript 

• If multiple events arrive at once, then multiple 
eventln functions are called 

• The optional eventsProcessed function is 
called after all (or some) eventln functions 
have been called 

function eventsProcessed ( ) { 

} 



Writing program scripts with JavaScript 

Accessing fields from JavaScript 

Each interface field is a JavaScript variable 

• Read a variable to access the field value 

• Write a variable to change the field value 


lastval = bounceHeight; 
bounceHeight = newval; 


// get field 
// set field 



Writing program scripts with JavaScript 

Accessing eventOuts from JavaScript 

Each interface eventOut is a JavaScript 
variable 

• Read a variable to access the last eventOut 
value 

• Write a variable to send an event on the 
eventOut 

lastval = value_changed[0]; // get last event 

value_changed[0] = newval; // send new event 
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Writing program scripts with JavaScript 

A sample JavaScript script 

• Create a Bouncing ball interpolator that 
computes a gravity-like vertical bouncing 
motion from a fractional time input 

• Nodes needed: 

DEF Ball Transform { 
children [ . . . ] 

} 

DEF Clock TimeSensor { 

} 

DEF Bouncer Script { 

} 



Writing program scripts with JavaScript 

A sample JavaScript script 

Script fields needed: 

• Bounce height 


DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
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Writing program scripts with JavaScript 

A sample JavaScript script 

• Inputs and outputs needed: 

• Fractional time input 

• Position value output 

DEF Bouncer Script { 

eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 

} 
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Writing program scripts with JavaScript 

A sample JavaScript script 

• Initialization and shutdown actions needed: 
• None - all work done in eventln function 
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Writing program scripts with JavaScript 

A sample JavaScript script 

• Event processing actions needed: 

• set_fraction eventln function 

• No need for eventsProcessed function 

DEF Bouncer Script { 
url "vrmlscript: 

function set_fraction( frac, tm ) { 

}" 
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Writing program scripts with JavaScript 

A sample JavaScript script 

• Calculations needed: 

• Compute new ball position 

• Send new position event 

• Use a ball position equation roughly based 
upon Physics 

• See comments in the VRML file for the 
derivation of the equation 
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Writing program scripts with JavaScript 

A sample JavaScript script 

DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 

url "vrmlscript: 

function set_fraction( frac, tm ) { 

y = 4.0 * bounceHeight * frac * (1.0 
value_changed[0] = 0.0; 
value_changed[1] = y; 
value_changed [ 2 ] = 0.0; 

}" 

} 


- frac) ; 
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Writing program scripts with JavaScript 

A sample JavaScript script 
• Routes needed: 

• Clock into script’s set_fraction 

• Script’s vaiue_changed into transform 

ROUTE Clock.fraction_changed TO Bouncer.set_fraction 
ROUTE Bouncer.value_changed TO Ball.set_translation 
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Writing program scripts with JavaScript 

A sample JavaScript script 


DEF Ball Transform { 
children [ 

Shape { 

appearance Appearance { 
material Material { 

ambientlntensity 0.5 
diffuseColor 1.0 1.0 1.0 
specularColor 0.7 0.7 0.7 
shininess 0.4 


} 

texture ImageTexture { url "beach.jpg" } 
textureTransform TextureTransform { scale 

} 

geometry Sphere { } 

} 

] 

} 

DEF Clock TimeSensor { 
cyclelnterval 2.0 
startTime 1.0 
stopTime 0.0 
loop TRUE 

} 

DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 


2 . 


url "vrmlscript: 

function set_fraction( frac, tm ) { 

y = 4.0 * bounceHeight * frac * (1.0 - frac); 
value_changed[0] = 0.0; 
value_changed[1] = y; 
value_changed[2] = 0.0; 

}" 

} 

ROUTE Clock.fraction_changed TO Bouncer.set_fraction 



ROUTE Bouncer.value_changed TO Ball.set_translation 
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Writing program scripts with JavaScript 

A sample JavaScript script 



[ bouncel.wri ] 
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Writing program scripts with JavaScript 

Building user interfaces 

• Program scripts can be used to help create 3D 
user interface widgets 

• Toggle buttons 

• Radio buttons 

• Rotary dials 

• Scrollbars 

• Text prompts 

• Debug message text 
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Writing program scripts with JavaScript 

Building a toggle switch 


• A toggle script turns on at 1st touch, off at 
2nd 

• A TouchSensor node can supply touch events 

DEF Toggle Script { 

field SFBool on TRUE 
eventln SFBool set_active 
eventOut SFBool on_changed 

url "vrmlscript: 

function set_active( b, ts ) { 

if ( b == FALSE ) return; 
if ( on == TRUE ) on = FALSE; 
else on = TRUE; 

on_changed = on; 

}" 

} 
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Writing program scripts with JavaScript 

Using a toggle switch 

• Use the toggle switch to make a lamp turn on 
and off 


DEF LightSwitch TouchSensor { } 

DEF LampLight SpotLight { . . . } 

DEF Toggle Script { . . . } 

ROUTE LightSwitch.isActive TO Toggle.set_active 
ROUTE Toggle.on_changed TO LampLight.set_on 
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Writing program scripts with JavaScript 

Using a toggle switch 



[ lamp2a.wri ] 
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Writing program scripts with JavaScript 

Building a color selector 

• The lamp on and off, but the light bulb 
doesn’t change color! 

• A color selector script sends an on color on a 
true input, and an off color on a false input 

DEF ColorSelector Script { 

field SFColor onColor 1.0 1.0 1.0 
field SFColor offColor 0.0 0.0 0.0 
eventln SFBool set_selection 
eventOut SFColor color_changed 

url "vrmlscript: 

function set_selection( b, ts ) { 

if ( b == TRUE ) color_changed = onColor; 
else color_changed = offColor; 

}" 

} 
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Writing program scripts with JavaScript 

Using a color selector 

• Use the color selector to change the lamp bulb 
color 

DEF LightSwitch TouchSensor { } 

DEF LampLight SpotLight { . . . } 

DEF BulbMaterial Material { . . . } 

DEF Toggle Script { . . . } 

DEF ColorSelector Script { . . . } 

ROUTE LightSwitch.isActive TO Toggle.set_active 
ROUTE Toggle.on_changed TO LampLight.set_on 
ROUTE Toggle.on_changed TO ColorSelector.set_selectior 
ROUTE ColorSelector.color_changed TO BulbMaterial.set_emi 
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Writing program scripts with JavaScript 

Using a color selector 



[ lamp2.wri ] 
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Writing program scripts with JavaScript 

Summary 

.The initialize and shutdown functions are 
called at load and unload 

• An eventln function is called when an event is 
received 

.The eventsProcessed function is called after all 
(or some) events have been received 

. Functions can get field values and send event 
outputs 
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Writing program scripts with Java 

Motivation 

Declaring a program script interface 
Importing packages for the Java class 
Creating the Java class 
Initializing a program script 
Shutting down a program script 
Responding to events 
Processing events in Java 
Accessing fields from Java 
Accessing eventOuts from Java 
A sample Java script 
A sample Java script 
A sample Java script 
A sample Java script 
A sample Java script 
A sample Java script 
A sample Java script 
A sample Java script 
A sample Java script 
A sample Java script 



A sample Java script 
A sample Java script 
A sample Java script 
Summary 
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Writing program scripts with Java 

Motivation 

• Compared to JavaScript/VRMLscript, Java 
enables: 

• Better modularity 

• Better data structures 

• Potential for faster execution 

• Access to the network 

• For simple tasks, use JavaScript/VRMLscript 

• For complex tasks, use Java 
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Writing program scripts with Java 

Declaring a program script interface 

• For a Java program script, give the class file 
in the script node’s uri field 
• A class file is a compiled Java program 
script 

DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 

url "bounce2.class" 
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Writing program scripts with Java 

Importing packages for the Java class 

• The program script file must import the 
VRML packages: 

import vrml.*; 
import vrml.field.*; 
import vrml.node.*; 
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Writing program scripts with Java 

Creating the Java class 

• The program script must define a public class 
that extends the script class 

public class bounce2 
extends Script 

{ 

} 



Writing program scripts with Java 

Initializing a program script 

The optional initialize method is called when 
the script is loaded 

public void initialize ( ) { 

} 

Initialization occurs when: 

• the script node is created (typically when 
the browser loads the world) 



Writing program scripts with Java 

Shutting down a program script 

The optional shutdown method is called when 
the script is unloaded 

public void shutdown ( ) { 

} 

Shutdown occurs when: 

• the script node is deleted 

• the browser loads a new world 
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Writing program scripts with Java 

Responding to events 

.The processEvent method is called each time 
an event is received, passing an Event object 
containing the event’s 

• value 

• time stamp 

public void processEvent( Event event ) { 

} 
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Writing program scripts with Java 

Processing events in Java 

• If multiple events arrive at once, then the 
processEvent method is called multiple times 

• The optional eventsProcessed method is called 
after all (or some) events have been handled 

public void eventsProcessed ( ) { 

} 



Writing program scripts with Java 

Accessing fields from Java 

Each interface field can be read and written 

• Call getFieid to get a field object 

obj = (SFFloat) getFieid( "bounceHeight" ); 

• Call getvaiue to get a field value 

lastval = obj.getValue( ); 

• Call setvaiue to set a field value 


obj.setValue( newval ); 



Writing program scripts with Java 

Accessing eventOuts from Java 

Each interface eventOut can be read and 
written 

• Call getEventout to get an eventOut object 

obj = (SFVec3f) getEventOut( "value_changed" ); 

• Call getvaiue to get the last event sent 

lastval = obj.getValue( ); 

• Call setvaiue to send an event 


obj.setValue( newval ); 
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Writing program scripts with Java 

A sample Java script 

• Create a Bouncing ball interpolator that 
computes a gravity-like vertical bouncing 
motion from a fractional time input 

• Nodes needed: 

DEF Ball Transform { 
children [ . . . ] 

} 

DEF Clock TimeSensor { 

} 

DEF Bouncer Script { 

} 
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Writing program scripts with Java 

A sample Java script 

• Give it the same interface as the JavaScript 
example 


DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 

url "bounce2.class" 

} 



Writing program scripts with Java 

A sample Java script 

Imports and class definition needed 


import vrml.*; 
import vrml.field.*; 
import vrml.node.*; 

public class bounce2 
extends Script 


{ 
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Writing program scripts with Java 

A sample Java script 

• Class variables needed: 

• One for the bounceHeight field value 

• One for the vaiue_changed eventOut object 

private float bounceHeight; 
private SFVec3f value_changedObj; 
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Writing program scripts with Java 

A sample Java script 

• Initialization actions needed: 

• Get the value of the bounceHeight field 

• Get the vaiue_changedob j eventOut object 

public void initialize( ) 

{ 

SFFloat obj = (SFFloat) getField( "bounceHeight" ); 
bounceHeight = (float) obj.getValue( ); 
value_changedObj = (SFVec3f) getEventOut( "value_char 

} 
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Writing program scripts with Java 

A sample Java script 

• Shutdown actions needed: 

• None - all work done in processEvent 
method 
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Writing program scripts with Java 

A sample Java script 

• Event processing actions needed: 

• processEvent event method 

• No need for eventsProcessed method 


public void processEvent( Event event ) 
{ 

} 
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Writing program scripts with Java 

A sample Java script 

• Calculations needed: 

• Compute new ball position 

• Send new position event 
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Writing program scripts with Java 

A sample Java script 


public void processEvent( Event event ) 

{ 

ConstSFFloat fit = (ConstSFFloat) event.getValue( ); 
float frac = (float) fit.getValue( ); 

float y = (float)(4.0 * bounceHeight * frac * (1.0 - fra 

float[] changed = new float[3]; 
changed[0] = (float) 0.0; 
changed[1] = y; 
changed[2] = (float) 0.0; 
value_changedObj.setValue( changed ); 

} 
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Writing program scripts with Java 

A sample Java script 

import vrml.*; 
import vrml.field.*; 
import vrml.node.*; 

public class bounce2 
extends Script 

{ 

private float bounceHeight; 
private SFVec3f value_changedObj; 

public void initialize ( ) 

{ 

// Get the fields and eventOut 

SFFloat floatObj = (SFFloat) getField( "bounceHeight 
bounceHeight = (float) floatObj.getValue( ); 

value_changedObj = (SFVec3f) getEventOut( "value_cha 

> 

public void processEvent( Event event ) 

{ 

ConstSFFloat fit = (ConstSFFloat) event.getValue( ); 
float frac = (float) fit.getValue( ); 

float y = (float)(4.0 * bounceHeight * frac * (1.0 - 

float[] changed = new float[3]; 

changed[0] = (float)0.0; 

changed[1] = y; 

changed[2] = (float)0.0; 

value_changedObj.setValue( changed ); 

} 

} 
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Writing program scripts with Java 

A sample Java script 
• Routes needed: 

• Clock into script’s set_fraction 

• Script’s vaiue_changed into transform 

ROUTE Clock.fraction_changed TO Bouncer.set_fraction 
ROUTE Bouncer.value_changed TO Ball.set_translation 
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Writing program scripts with Java 

A sample Java script 


DEF Ball Transform { 
children [ 

Shape { 

appearance Appearance { 
material Material { 

ambientlntensity 0.5 
diffuseColor 1.0 1.0 1.0 
specularColor 0.7 0.7 0.7 
shininess 0.4 


} 

texture ImageTexture { url "beach.jpg" } 
textureTransform TextureTransform { scale 

} 

geometry Sphere { } 

} 

] 

} 

DEF Clock TimeSensor { 
cyclelnterval 2.0 
startTime 1.0 
stopTime 0.0 
loop TRUE 

} 

DEF Bouncer Script { 

field SFFloat bounceHeight 3.0 
eventln SFFloat set_fraction 
eventOut SFVec3f value_changed 


2 . 


url "bounce2.class" 

} 

ROUTE Clock.fraction_changed TO Bouncer.set_fraction 
ROUTE Bouncer.value_changed TO Ball.set_translation 
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Writing program scripts with Java 

A sample Java script 



[ bounce2.wri ] 
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Writing program scripts with Java 

Summary 


.The initialize and shutdown methods are 
called at load and unload 

.The processEvent method is called when an 
event is received 

.The eventsProcessed method is called after all 
(or some) events have been received 

. Methods can get field values and send event 
outputs 



473 

Creating new node types 

Motivation 

Syntax: PROTO 

Defining prototype bodies 

Syntax: IS 

Syntax: IS 

Using IS 

Using prototyped nodes 
Controlling usage rules 
Controlling usage rules 
A sample prototype use 
A sample prototype use 
A sample prototype use 
A sample prototype use 
A sample prototype use 
Changing a prototype 
A sample prototype use 
Syntax: EXTERNPROTO 
Summary 



474 


Creating new node types 

Motivation 

• You can create new node types that 
encapsulate: 

• Shapes 

• Sensors 

• Interpolators 

• Scripts 

• anything else ... 

• This creates high-level nodes 

• Robots, menus, new shapes, etc. 
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Creating new node types 

Syntax: PROTO 

• A proto statement declares a new node type (a 
prototype) 

• name - the new node type name 

• fields and events - interface to the 
prototype 

PROTO BouncingBall [ 

field SFFloat bounceHeight 1.0 
field SFTime cyclelnterval 1.0 

] { 


} 
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Creating new node types 

Defining prototype bodies 
• proto defines: 

• body - nodes and routes for the new node 
type 

PROTO BouncingBall [ 

] { 

Transform { 

children [ . . . ] 

} 

ROUTE . . . 

} 



Creating new node types 

Syntax: IS 

The is syntax connects a prototype interface 
field, eventln, or eventOut to the body 

• Like an assignment statement 

• Assigns interface field or eventln to body 

• Assigns body eventOut to interface 
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Creating new node types 

Syntax: IS 

• Interface items connected by is need not have 
the same name as an item in the body, but 
often do 

PROTO BouncingBall [ 

field SFFloat bounceHeight 1.0 
field SFTime cyclelnterval 1.0 

] { 

DEF Clock TimeSensor { 

cyclelnterval IS cyclelnterval 

} 


} 
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Creating new node types 

Using IS 


May is to ... 

Exposed 

Interface Fields fields Eventlns EventOuts 


Fields 

yes 

yes 

no 

no 

Exposed fields 

no 

yes 

no 

no 

Eventlns 

no 

yes 

yes 

no 

EventOuts 

no 

yes 

no 

yes 



Creating new node types 

Using prototyped nodes 

The new node type can be used like any other 
type 


BouncingBall { 

bounceHeight 3.0 
cyclelnterval 2.0 


} 
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Creating new node types 

Controlling usage rules 

• Recall that node use must be appropriate for 
the context 

• A shape node specifies shape, not color 

• A Material node specifies color, not shape 

• A box node specifies geometry, not shape or 
color 
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Creating new node types 

Controlling usage rules 

• The context for a new node type depends upon 
the first node in the proto body 

• For example, if the first node is a geometry 
node : 

• The prototype creates a new geometry node 
type 

• The new node type can be used wherever the 
first node of the prototype body can be used 
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Creating new node types 

A sample prototype use 

• Create a BouncingBaii node type that: 

• Builds a beachball 

• Creates an animation clock 

• Using a proto field to select the cycle 
interval 

• Bounces the beachball 

• Using the bouncing ball program script 

• Using a proto field to select the bounce 
height 
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Creating new node types 

A sample prototype use 

• Fields needed: 

• Bounce height 

• Cycle interval 

PROTO BouncingBall [ 

field SFFloat bounceHeight 1.0 
field SFTime cyclelnterval 1.0 

] { 

} 
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Creating new node types 

A sample prototype use 

• Inputs and outputs needed: 

• None - a TimeSensor node is built in to the 
new node 
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Creating new node types 

A sample prototype use 
• Body needed: 

• A ball shape inside a transform 

• An animation clock 

• A bouncing ball program script 

• Routes connecting it all together 

PROTO BouncingBall [ 

] { 

DEF Ball Transform { 
children [ 

Shape { . . . } 

] 

} 

DEF Clock TimeSensor { . . . } 

DEF Bouncer Script { . . . } 

ROUTE ... 
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Creating new node types 

A sample prototype use 



[ bounce3.wri ] 
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Creating new node types 

Changing a prototype 

• If you change a prototype, all uses of that 
prototype change as well 

• Prototypes enable world modularity 

• Large worlds make heavy use of prototypes 

• For the BouncingBaii prototype, adding a 
shadow to the prototype makes all balls have a 
shadow 
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Creating new node types 

A sample prototype use 



[ bounce4.wri ] 
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Creating new node types 

Syntax: EXTERNPROTO 

• Prototypes are typically in a separate external 
file, referenced by an externproto 

• name, fields, events - as from proto, minus 
initial values 

• url - the URL of the prototype file 

• #name - name of proto in file 

EXTERNPROTO BouncingBall [ 

field SFFloat bounceHeight 
field SFTime cyclelnterval 
] "bounce.wrl#BouncingBall" 
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Creating new node types 

Summary 

• proto declares a new node type and defines its 
node body 

• externproto declares a new node type, 
specified by URL 
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Providing information about your world 


Motivation 
Syntax: Worldlnfo 
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Providing information about your world 

Motivation 

• After you’ve created a great world, sign it! 

• You can provide a title and a description 
embedded within the file 
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Providing information about your world 

Syntax: Worldlnfo 

• A Worldlnfo node provides title and 
description information for your world 

• title - the name for your world 

• info - any additional information 

Worldlnfo { 

title "My Masterpiece" 

info [ "Copyright (c) 1997 Me." ] 

} 
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Summary examples 

An animated switch 
A vector node for vector fields 
An animated texture plane node 
A cutting plane node 
An animated flame node 
A torch node 
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Summary examples 

An animated switch 

• A Switch node groups together a set of 
elevation grids 

• A script node converts fractional times to 
switch choices 



[ animgrd.wri ] 
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Summary examples 

A vector node for vector fields 

• A proto encapsulates a vector shape into a 
vector node 

• That node is used multiple times to create a 
vector field 



[ vecfldl.wri ] 
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Summary examples 

An animated texture plane node 

• A script node selects a texture to map to a 
face 

• A proto encapsulates the face shape, script, 
and routes to create a TexturePlane node type 



[ texplane.wri ] 



Summary examples 

A cutting plane node 

A TexturePlane node creates textured face 
A PlaneSensor node slides the textured face 
A proto encapsulates the textured face, sensor 
and translator script to create a SlidingPlane 
node 



[ cutplane.wri ] 
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Summary examples 

An animated flame node 

• A script node cycles between flame textures 

• A proto encapsulates the flame shape, script, 
and routes into a Flames node 



[ match.wri ] 
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Summary examples 

A torch node 

• A Flame node creates animated flame 

• An lod node selects among torches using the 
flame 

• A proto encapsulates the torches into a Torch 
node 



[ columns.wrl ] 
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Miscellaneous extensions 


Working groups 

Working groups 

Using the binary file format 

Using the binary file format 

Using the external authoring interface 

Using the external authoring interface 

Using living worlds 



Miscellaneous extensions 

Working groups 

Several groups are working on VRML 
extensions 

• Color fidelity WG 

• Compressed binary format WG 

• Conformance WG 

• Database WG 

• External authoring interface WG 

• Human animation WG 
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Miscellaneous extensions 

Working groups 


• And more... 

• Keyboard input WG 

• Living worlds WG 

• Metaforms WG 

• Object-oriented WG 

• Universal media libraries WG 
. Widgets WG 



Miscellaneous extensions 

Using the binary file format 

The binary file format enables smaller files 
for faster download 

The binary file format includes 

• Binary representation of nodes and fields 

• Support for prototypes 

• Geometry compression 
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Miscellaneous extensions 

Using the binary file format 

• Most authoring will be done with world 
builders that output binary VRML files 
directly 

• Hand-authored text VRML will be compiled 
to the binary format 

• Converters back to text VRML will become 
available 

• Comments will be lost by translation 

• Worldlnfo nodes will be retained 
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Miscellaneous extensions 

Using the external authoring interface 

• Program scripts in a script node are Internal 

• Inside the world 

• Connected by routes 

• External program scripts can be written in 
Java using the External Authoring Interface 
(EAI) 

• Outside the world, on an HTML page 

• No need to use routes! 
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Miscellaneous extensions 

Using the external authoring interface 

• A typical Web page contains: 

• HTML text 

• An embedded VRM L browser plug-in 

• A Java applet 

• The EAI enables the Java applet to "talk" to 
the VRML browser 

• The EAI is not part of the VRML standard 
(yet), but it is widely supported 

• Check your browser’s release notes for EAI 
support 
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Miscellaneous extensions 

Using living worlds 

• Several extensions are in progress to create a 
framework for multi-user living worlds 

• Shared objects and spaces 

• Piloted objects (like avatars) 

• Common avatar descriptions 
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Conclusion 


Coverage 

Coverage 

Where to find out more 
Where to find out more 
Introduction to VRML 97 
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Conclusion 

Coverage 

• This morning we covered: 

• Building primitive shapes 

• Building complex shapes 

• Translating, rotating, and scaling shapes 

• Controlling appearance 

• Grouping shapes 

• Animating transforms 

• Interpolating values 

• Sensing viewer actions 
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Conclusion 

Coverage 

• This afternoon we covered: 

• Controlling texture 

• Controlling shading 

• Adding lights 

• Adding backgrounds and fog 

• Controlling detail 

• Controlling viewing 

• Adding sound 

• Sensing the viewer 

• Using and writing program scripts 

• Building new node types 
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Conclusion 

Where to find out more 

• The VRML 2.0 specification 

http ://vag. vrml.org/VRML2.0/FINAL 

• The VRML 97 specification 

http://vrml.sgi.com/moving-worlds 

• The VRML Repository 

http ://www.sdsc.edu/vrml 
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Conclusion 

Where to find out more 

• Shameless plug for my VRM L book... 

The VRML 2.0 Sourcebook 

by Andrea L. Ames, David R. Nadeau, and 

John L. Moreland 

published by John Wiley & Sons 
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Conclusion 

Introduction to VRML 97 
Thanks for coming! 

Dave Nadeau 

San Diego Supercomputer Center 

nadeau@sdsc.edu 



